换行后修改CSS的行为

时间：2018-10-09 08:51:54

标签： css css3 flexbox

如您所见，左侧的图像会贴在右侧的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>

2 个答案:

答案 0 :(得分：1)

这对您有用吗？

<div class="container">
  <button type="button" class="btn" ng-class="{'active': isActive}" ng-click="activeButton()">All</button>
  <button type="button" class="btn" ng-class="{'active': isActive}">Small<span class="price">  $241+</span></button>
  <button type="button" class="btn" ng-class="{'active': isActive}" click="activeButton()">Medium<span class="price">  $241+</span></button>
  <button type="button" class="btn" ng-class="{'active': isActive}" click="activeButton()">Large<span class="price">  $241+</span></button>
  <button type="button" class="btn" ng-class="{'active': isActive}" click="activeButton()">SUV<span class="price">  $241+</span></button>
  <button type="button" class="btn" ng-class="{'active': isActive}" click="activeButton()">VAN<span class="price">  $241+</span></button>
  <button type="button" class="btn" ng-class="{'active': isActive}" click="activeButton()">More</button>
</div>

app.controller('appCtrl', function ($scope) {
    $scope.isActive = false;
    $scope.activeButton = function() {
    $scope.isActive = !$scope.isActive;
  }  
});

::-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;}

}

答案 1 :(得分：0)

我从头开始重新编写了整个代码，然后按需工作了。 这是结果。 

::-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;
}

@media only screen and (min-width:1110px){
.galeria {
    -webkit-box-sizing: border-box;
	border-style:solid;
  	border-color:#45df43;
  max-width:1110px;
	display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
    
}  
}
@media only screen and (max-width:1109px){
.galeria{
	border-style:solid;
  	border-color:#45df43;
  	max-width:1110px;
   
	display:flex;
  	flex-direction:column;
  	flex-wrap:wrap;
  	justify-content:center;
}  
  .contenedor_der{
  	max-height:490px;
    flex-basis:content;
    width:100%;
    max-width:666px;
    margin: 0 auto;
    flex: 1;
  }
  .contenedor_izq{
    flex-basis:content;
    max-width:666px;
    margin: 0 auto;
	border-style:solid;
  	border-color:#df43df;
    flex:1;
    
}
  .contenedor_izq img{
	max-width:666px;
  width:100%;
}
}
.contenedor_izq{
	border-style:solid;
  	border-color:#df43df;
  	flex-basis:content;
}
.contenedor_izq img{
	max-width:666px;
  flex:1;
}
.contenedor_der{
max-height:416.25px;
overflow-y:scroll;
border-style:solid;
flex:1 1 auto;
}


.caja_articulo{
width:99%; /*Debido a scroll bar que ocupa 10px */
  min-width:auto;
  height:100px;
  border-style: solid;
}
.imagen_articulo{
  -webkit-box-sizing: border-box;
  float:left;
  width:auto;
  height:auto;
}
.imagen_articulo img{
  max-width:100px;
}
.filas_texto{
  -webkit-box-sizing: border-box;
 margin-left:100px;
  width:auto;
  min-width:100px;
  height:50%;
  border-style: solid;
  border-color:#f505d5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Editor JavaScript online - www.cubicfactory.com</title>
</head>
<body>
  <div class="galeria">
  	<div class="contenedor_izq">
    <img src="http://www.hyattrestaurants.com/wp-content/uploads/2015/06/Collage-800x500px.jpg">
    </div>
    <div class="contenedor_der">
      <div class="caja_articulo">
          <div class="imagen_articulo">
              <img src=" 		https://upload.wikimedia.org/wikipedia/commons/4/4f/Gallet_clamshell_600x600_2.jpg">
          </div>
          <div class="filas_texto"></div>
          <div class="filas_texto"></div>
      </div>
      <div class="caja_articulo">
          <div class="imagen_articulo">
              <img src=" 		https://upload.wikimedia.org/wikipedia/commons/4/4f/Gallet_clamshell_600x600_2.jpg">
          </div>
          <div class="filas_texto"></div>
          <div class="filas_texto"></div>
      </div>
      <div class="caja_articulo">
          <div class="imagen_articulo">
              <img src=" 		https://upload.wikimedia.org/wikipedia/commons/4/4f/Gallet_clamshell_600x600_2.jpg">
          </div>
          <div class="filas_texto"></div>
          <div class="filas_texto"></div>
      </div>
      <div class="caja_articulo">
          <div class="imagen_articulo">
              <img src=" 		https://upload.wikimedia.org/wikipedia/commons/4/4f/Gallet_clamshell_600x600_2.jpg">
          </div>
          <div class="filas_texto"></div>
          <div class="filas_texto"></div>
      </div>
      <div class="caja_articulo">
          <div class="imagen_articulo">
              <img src=" 		https://upload.wikimedia.org/wikipedia/commons/4/4f/Gallet_clamshell_600x600_2.jpg">
          </div>
          <div class="filas_texto"></div>
          <div class="filas_texto"></div>
      </div>
    </div>
  </div>
    
</body>
</html>

相关问题
最新问题