Блог

У меня есть два divs внутри другого div, ширина которых составляет 50%. У меня установлена минимальная ширина для этих разделов, так что, когда ширина страницы становится слишком маленькой, они больше не располагаются рядом, а складываются вертикально. Мне бы хотелось, по возможности, использовать чистое CSS-решение, чтобы сделать так, чтобы внутренние разделы имели ширину 100%, как только они разделяются на свои собственные строки.

Я создал фрагмент кода, чтобы проиллюстрировать, что я имею в виду:

 #container {
  resize: both;
  overflow: auto;
  background-color: blue;
}

.yellow{
  background-color: yellow;
}

.red{
  background-color: red;
}

.width-50 {
  min-width: 200px;
  float: left;
  width: 50%;
}  

 <div id="container">
  <div class="width-50 yellow">
    Div 1
  </div>
  <div class="width-50 red">
    Div 2
  </div>
</div>  

Если вы возьмете дескриптор изменения размера и уменьшите ширину родительского div, в конечном итоге у divs не останется места для размещения рядом друг с другом, но они не заполнят всю ширину родительского div.

Вы можете использовать медиа-запрос CSS3

Предпочитайте подход, ориентированный на мобильные устройства, в вашем случае вам следует использовать точку останова мультимедиа вверх:

 .width-50 {
  // mobile css
}
@media (min-width: 500px){
.width-50 {
  width: 50%;
}
  

}