Как сделать так, чтобы блок сжимался до своей минимальной ширины при сужении окна браузера?

Question

При сужении окна браузера белый блок не сжимается до минимальной ширины 320 px. Как это исправить?

body {
  background-color: cyan;
  margin: 0;
}

.news {
  max-width: 960px;
  min-width: 320px;
  height: 400px;
  background-color: #fff;
  margin: 50px auto;
  border: 1px solid grey;
}

.section {
  width: 270px;
  height: 80px;
  background-color: yellow;
  float: left;
  margin-left: 8px;
  margin-bottom: 8px;
  margin-top: 8px;
  position: relative;
}

.text {
  position: absolute;
  left: 80px;
  top: 8px;
}

p {
  margin: 10px;
}

<div class="news">
  <div class="section">
    <img src="img/mark.jpg" alt="">
    <div class="text">
      <p>14 Ноября 2014.</p><a href="#">Важная информация</a></div>
  </div>
  <div class="section">
    <img src="img/plan.jpg" alt="">
    <div class="text">
      <p>15 Ноября 2014.</p><a href="#">План важных мероприятий на Ноябрь 2014.</a></div>
  </div>
  <div class="section">
    <img src="img/balls.png" alt="">
    <div class="text">
      <p>10 Ноября 2014.</p><a href="#">Поздравляем Людмилу Николаевну(Россия, Москва) с днем рождения!)</a></div>
  </div>
  <div class="section"> <img src="img/beauty.png" alt="">
    <div class="text">
      <p>24 Ноября 2014.</p><a href="#">Итоги выставки "Красота и Здоровье 2014"</a></div>
  </div>
  <div class="section"> <img src="img/lection.png" alt="">
    <div class="text">
      <p>26 Ноября 2014.</p><a href="#">Вторая часть лекций интрнет-курса "История пептидов"</a></div>
  </div>
  <div class="section"><img src="img/globe.png" alt="">
    <div class="text">
      <p>27 Ноября 2014.</p><a href="#">Вторая часть всемирного форума по похудению</a></div>
  </div>
</div>

Answer 1

Для этого тебе нужно использовать @media которые позволяют менять css у блоков при определенной ширине установленной тобой, как пример я задал 600px ты можешь сделать столько, сколько тебе нужно

@media (max-width: 600px) {
  .news {
    width: 320px;    
  }
}

Тоесть при ширине меньше 600px у тебя будет ширина блока .news 320px

Answer 2

body{
            background-color: cyan;
            margin:0;
        }
        .news{
            max-width:960px;
            min-width:320px;
            height:400px;
            background-color: #fff;
            margin:50px auto;
            border:1px solid grey;
            display: flex;
            flex-wrap: wrap;
            
        }
        .section{
            width:270px;
            height:80px;
            background-color: yellow;
            float:left;
            margin-left:8px;
            margin-bottom: 8px;
            margin-top:8px;
            position:relative;
        }
        .text{
            position:absolute;
            left:80px;
            top:8px;
        }
        p{
            margin:10px;
            
        }

<body>
    <div class="news">
        <div class="section">
            <img src="img/mark.jpg" alt=""><div class="text"><p>14 Ноября 2014.</p><a href="#">Важная информация</a></div>
        </div>
        <div class="section">
            <img src="img/plan.jpg" alt=""><div class="text"><p>15 Ноября 2014.</p><a href="#">План важных мероприятий на Ноябрь 2014.</a></div>
        </div>
        <div class="section">
            <img src="img/balls.png" alt=""><div class="text"><p>10 Ноября 2014.</p><a href="#">Поздравляем Людмилу Николаевну(Россия, Москва) с днем рождения!)</a></div>
        </div>
        <div class="section"> <img src="img/beauty.png" alt="">
            <div class="text"><p>24 Ноября 2014.</p><a href="#">Итоги выставки "Красота и Здоровье 2014"</a></div>
        </div>
        <div class="section"> <img src="img/lection.png" alt="">
            <div class="text"><p>26 Ноября 2014.</p><a href="#">Вторая часть лекций интрнет-курса "История пептидов"</a></div>
        </div>
        <div class="section"><img src="img/globe.png" alt="">
            <div class="text"><p>27 Ноября 2014.</p><a href="#">Вторая часть всемирного форума по похудению</a></div></div>
        </div>
</body>

можно использовать flex, для того, чтобы при уменьшении экрана ваши блоки просто перескакивали, в данном случае я добавил к .news display: flex; flex-wrap: wrap;, когда 2 блока в строку не будет умещаться на одном экране перезайдет перескок, и все блоки выстроятся в прямую линию по вертикали. Вы правильно не использовали для этой секции фиксированной ширины, для блоков тоже не рекомендую использовать width: --- лучше используйте max-width тогда ваши блоки будут приобретать резиновость, советую ознакомиться ну и media офк

БЛОГ НА HUSL

Как сделать так, чтобы блок сжимался до своей минимальной ширины при сужении окна браузера?

Ответы (2 шт):