Изменить поведение CSS после переноса - PullRequest
Новая
       14

Изменить поведение CSS после переноса

0 голосов
/ 09 октября 2018

Как вы можете видеть, изображение слева прилипает к правому элементу div, но как только правый элемент div оборачивается и помещается под изображение, изображение остается слева.Я хотел бы, чтобы картинка и второй элемент div (ниже, после переноса) были одинакового размера, точно совпадающего с размером по горизонтали.(По какой-то причине изображение не отображается, но это изображение размером 800x500 пикселей).

::-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 голосов
/ 09 октября 2018

Я переработал весь код с нуля, и я получил то, что хотел.Вот это результат.

::-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>
0 голосов
/ 09 октября 2018

Это у вас работает? 

::-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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...