0

При сужении окна браузера белый блок не сжимается до минимальной ширины 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>

1
  • только что сжимал окно браузера до минимального, блок .news сжался до минимального. опишите детальнее проблему, пока что она не воспроизводится 8 сен 2020 в 9:36

2 ответа 2

0

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

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

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

3
  • Возможно ли это сделать без @media? 8 сен 2020 в 7:36
  • Можно, например если использовать сетку boostrap'a или materialize.css 8 сен 2020 в 7:40
  • Или width: 100%; и он всегда будет по ширине окна, но есть минус, придётся следить уже не за промежутками, а за каждым пикселем сужения окна. Обычно делают поэтому до 768px отрезки экрана типа всё что выше 1200px, всё что ниже 992px, а с 767px уже идёт мобилка в которой всё на 100% делаем. 4 апр 2023 в 6:01
0

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 офк

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.