时间戳

首页 > 解决方案 > 换行后修改 CSS 的行为

css - 换行后修改 CSS 的行为

问题描述

如您所见，左边的图像粘在右边的 div 上，但是一旦右边的 div 包裹并放在图片下方，图像就会留在左边。我想让图片和第二个 div （下面，换行后）大小相同，只匹配水平大小。（由于某种原因，图片没有显示，但它是 800x500px 的图片）。

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: #91897b;
}

::-webkit-scrollbar-track:hover {
	background: #ccb288;
}

::-webkit-scrollbar-thumb {
	background: #e8aa45;
}

::-webkit-scrollbar-thumb:hover {
	background: #f4a11a;
}

img {
	max-width:100%;
	max-height:500px;
}

.flex-container {
	display: flex;
	background-color: DodgerBlue;
	flex-direction: row;
	flex-wrap: wrap;
	flex-grow:1;
}

.flex-container > div {
	background-color: #fafafa;
	width:auto;
	height:100%margin: 1px;
	font-size: 30px;
}

.caja-scroll{
	overflow-y:auto;
	background-color:#fafafa;
	border-color: coral;
	width:100%;
	height:100%;
	max-width:100%;
  max-height:500px;
  flex-shrink:5;
}

.bordes_gallery {
	border-style:solid;
	max-width:100%;
	flex-grow: 1;
  margin: 1px;
}

.gallery_item {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	max-height:100px;
	border-style:dotted;
}

.gallery_item > #imagen {
	order: 1;
	flex-basis: 100px;
	align-items:center;
	justify-content:center;
}

.gallery_item > #texto {
	order: 2;
	align-items:center;
	justify-content:center;
	margin-left:5px;
}
<body>
    <div class="flex-container">
        <div style="order: 1; flex-basis: content; align-items:center; justify-content:flex-start; display: flex;">
          <img src="http://kb4images.com/images/usa-wallpaper/36955559-usa-wallpaper.jpg"></img>
        </div>
  
        <div style="order: 2; flex-grow: 1; flex-basis: 28rem; max-height:500px; justify-content:flex-start; flex-shrink: 0;">
            <div class="caja-scroll">
                <div class="col-md-12 bordes_gallery">
                    <div class="gallery_item ">
                        <div id="imagen">
                          <img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
                      	</div>
                        <div id="texto">asdfadfs</div>
                    </div>
                    <div class="gallery_item ">
                        <div id="imagen">
                          <img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
                      	</div>
                        <div id="texto">asdfadfs</div>
                    </div>
                    <div class="gallery_item ">
                        <div id="imagen">
                          <img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
                      	</div>
                        <div id="texto">asdfadfs</div>
                    </div>
                    <div class="gallery_item ">
                        <div id="imagen">
                          <img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
                      	</div>
                        <div id="texto">asdfadfs</div>
                    </div>
                    <div class="gallery_item ">
                        <div id="imagen">
                          <img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
                      	</div>
                        <div id="texto">asdfadfs</div>
                    </div>
                    <div class="gallery_item ">
                        <div id="imagen">
                          <img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
                      	</div>
                        <div id="texto">asdfadfs</div>
                    </div>
                </div>
            </div>
        </div>
</body>

标签： cssflexbox

解决方案

这对你有用吗？

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: #91897b;
}

::-webkit-scrollbar-track:hover {
	background: #ccb288;
}

::-webkit-scrollbar-thumb {
	background: #e8aa45;
}

::-webkit-scrollbar-thumb:hover {
	background: #f4a11a;
}

img {
	max-width:100%;
	max-height:500px;
}

.flex-container {
	display: flex;
	background-color: DodgerBlue;
	flex-direction: row;
	flex-wrap: wrap;
	flex-grow:1;
}

.flex-container > div {
	background-color: #fafafa;
	width:auto;
	height:100%margin: 1px;
	font-size: 30px;
}

.caja-scroll{
	overflow-y:auto;
	background-color:#fafafa;
	border-color: coral;
	width:100%;
	height:100%;
	max-width:100%;
  max-height:500px;
  flex-shrink:5;
}

.bordes_gallery {
	border-style:solid;
	max-width:100%;
	flex-grow: 1;
  margin: 1px;
}

.gallery_item {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	max-height:100px;
	border-style:dotted;
}

.gallery_item > #imagen {
	order: 1;
	flex-basis: 100px;
	align-items:center;
	justify-content:center;
}

.gallery_item > #texto {
	order: 2;
	align-items:center;
	justify-content:center;
	margin-left:5px;
}

@media screen and ( max-width: 1263px) {
    .flex-container>div:nth-child(1){width:100%;}
    .flex-container>div:nth-child(1)>img{width:100%;}
    .flex-container {max-width:800px; margin: auto;}

}
<div class="flex-container">
        <div style="order: 1; flex-basis: content; align-items:center; justify-content:flex-start; display: flex;">
          <img src="http://kb4images.com/images/usa-wallpaper/36955559-usa-wallpaper.jpg"></img>
        </div>
  
        <div style="order: 2; flex-grow: 1; flex-basis: 28rem; max-height:500px; justify-content:flex-start; flex-shrink: 0;">
            <div class="caja-scroll">
                <div class="col-md-12 bordes_gallery">
                    <div class="gallery_item ">
                        <div id="imagen">
                          <img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
                      	</div>
                        <div id="texto">asdfadfs</div>
                    </div>
                    <div class="gallery_item ">
                        <div id="imagen">
                          <img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
                      	</div>
                        <div id="texto">asdfadfs</div>
                    </div>
                    <div class="gallery_item ">
                        <div id="imagen">
                          <img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
                      	</div>
                        <div id="texto">asdfadfs</div>
                    </div>
                    <div class="gallery_item ">
                        <div id="imagen">
                          <img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
                      	</div>
                        <div id="texto">asdfadfs</div>
                    </div>
                    <div class="gallery_item ">
                        <div id="imagen">
                          <img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
                      	</div>
                        <div id="texto">asdfadfs</div>
                    </div>
                    <div class="gallery_item ">
                        <div id="imagen">
                          <img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
                      	</div>
                        <div id="texto">asdfadfs</div>
                    </div>
                </div>
            </div>
        </div>

推荐阅读