CSS для настройки высоты div, равной братьям и сестрам - PullRequest
1 голос
/ 20 марта 2020

Я застрял с CSS config. У меня есть следующее <div>:

@media only screen and (max-width: 900px) { 
    .caracteristicas{
      display: flex; /* repare aqui */
      flex-direction: column; /* repare aqui */
      text-align: justify;
       border: 1px solid grey;
      margin 2px;
      height:auto;
	  }
        
    .img-div {
       height: auto !important;
       float:left;
       position: relative;
       overflow: hidden;
       width: 20%;
       margin: 3px 10px;
    }   
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<div class="container-fluid">
      <div class="row row-carac">
         <div class="col-xs-6 col-md-4 caracteristicas">
            <strong>Fluido R410-A</strong>
            <img class="img-div" title="gas r410 A" src="{{media url="wysiwyg/R4.png"}}" alt="r410a" />
            <p>Gás &nbsp;N&atilde;o inflam&aacute;vel, at&oacute;xico e menos nocivo &agrave; camada de oz&ocirc;nio.</p>
         </div>
        <div class="col-xs-6 col-md-4 caracteristicas">
            <strong>Fun&ccedil;&atilde;o turbo</strong>
            <img class="img-div" title="Fun&ccedil;&atilde;o turbo" src="{{media url="wysiwyg/TURBO.png"}}" alt="turbo" />
            <p>Operação em maior potência garante um desempenho de refrigera&ccedil;&atilde;o &eacute; superior.</p>
         </div>
		 <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-auto col-md-4 caracteristicas">
            <strong>Fun&ccedil;&atilde;o Sleep</strong>
            <img class="img-div" title="fun&ccedil;&atilde;o sleep" src="{{media url="wysiwyg/SLEEP.png"}}" alt="sleep" />
            <p>&nbsp;Ajusta A temperatura automaticamente durante a noite por at&eacute; 7 horas.&nbsp;</p>
         </div>
      </div>
</div>

Это CSS для отображения на мобильном телефоне. Мне нужно, чтобы <div> s были выровнены на мобильном телефоне и имели такую ​​же высоту. В настоящее время каждая высота <div> изменяется в соответствии с текстом:

Image 1

Мне нужно, чтобы это выглядело так, но без фиксированной высоты и с некоторым промежутком между коробки: enter image description here

Есть советы?

1 Ответ

1 голос
/ 23 марта 2020

спасибо за помощь, особенно @ZiadDarwich, за помощь. Следуя его инструкциям и изменив ссылку bootstrap на https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css и добавив col к первым 2 div, это сработало. Мой css стал таким:

  @media only screen and (max-width: 900px) { 

  .row .row-carac{
  display: flex; /* repare aqui */
  flex-direction: column; /* repare aqui */
  text-align: justify;
  margin: 4px 0 4px 0;
  max-width:95%;
  }

  .caracteristicas{
  border: 1px solid grey;
  margin: 3px 0 3px 0;  
  height:auto;
  }

  .img-div {
     height: auto !important;
     float:left;
     position: relative;
     overflow: hidden;
     width: 22%;
     margin: 4px 10px;
  }   
  }

Текст html закончился как:

<div class="container-fluid">
<div class="row row-carac">
  <div class="col col-xs-6 col-md-4 caracteristicas">
     <strong>Fluido R410-A</strong> <img class="img-div" title="gas r410 A" src="{{media url="wysiwyg/R4.png"}}" alt="r410a" />
     <p><span style="font-size: small;">Refrigerante ecol&oacute;gico n&atilde;o inflam&aacute;vel, at&oacute;xico e menos nocivo &agrave; camada de oz&ocirc;nio.</span></p>
  </div>
  <div class="col col-xs-6 col-md-4 caracteristicas ">
     <strong>Fun&ccedil;&atilde;o turbo</strong> <img class="img-div" title="Fun&ccedil;&atilde;o turbo" src="{{media url="wysiwyg/TURBO.png"}}" alt="turbo" />
     <p><span style="font-size: small;">Opera&ccedil;&atilde;o do compressor em maior pot&ecirc;ncia garante um desempenho de refrigera&ccedil;&atilde;o superior.</span></p>
  </div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-auto col-md-4 caracteristicas">
     <strong>Fun&ccedil;&atilde;o Sleep</strong> <img class="img-div" title="fun&ccedil;&atilde;o sleep" src="{{media url="wysiwyg/SLEEP.png"}}" alt="sleep" />
     <p><span style="font-size: small;">Ajusta a temperatura e ru&iacute;do automaticamente durante a noite por at&eacute; 7 horas.&nbsp;</span></p>
  </div>
</div>
</div>

Большое спасибо, увидимся в следующий раз.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...