0

Подскажите, пожалуйста, как разместить div class="div2" во всю ширину div class="div1"

.div1 {
  overflow-y: scroll;
}

.div2 {
  width: auto;
  border: 1px solid #777;
  display: block;
}

.div3 {
  height: 25px;
  border: 1px solid #fff;
  text-align: center;
  overflow: hidden;
  border-radius: 4px;
  color: white;
  display: block;
  background: red;
}
<div class="div1">
  <div class="div2">
    <div class="div3" style="width:1000px;">Блок</div>
  </div>
  <div class="div2">
    <div class="div3" style="width:800px;">Блок</div>
  </div>
  <div class="div2">
    <div class="div3" style="width:600px;">Блок</div>
  </div>
  <div class="div2">
    <div class="div3" style="width:400px;">Блок</div>
  </div>
  <div class="div2">
    <div class="div3" style="width:200px;">Блок</div>
  </div>
</div>

2
  • А зачем у вас в div3 1000px задано?
    – Pantera
    3 июл 2019 в 14:26
  • @Pantera В div3 размещены элементы неизвестное количество. 3 июл 2019 в 14:27

2 ответа 2

1

Полагаю, вам нужно написать так

.div2 {
    width: auto;
    border: 1px solid #777;
    display: inline-block;
}

Тогда так

.div1 {
  overflow-y: scroll;
}

.div2 {
  display: inline-block;
  background: yellow;
}

.div3 {
  border: 1px solid #777;
}

.div4 {
  height: 25px;
  border: 1px solid #fff;
  text-align: center;
  overflow: hidden;
  border-radius: 4px;
  color: white;
  display: block;
  background: red;
}
<div class="div1">
  <div class="div2">
    <div class="div3">
      <div class="div4" style="width: 100px">1</div>
    </div>
    <div class="div3">
      <div class="div4" style="width: 1000px">2</div>
    </div>
    <div class="div3">
      <div class="div4" style="width: 500px">3</div>
    </div>
    <div class="div3">
      <div class="div4" style="width: 150px">4</div>
    </div>
    <div class="div3">
      <div class="div4" style="width: 300px">5</div>
    </div>
    <div class="div3">
      <div class="div4" style="width: 400px">6</div>
    </div>
  </div>
</div>

11
0

Доброго времени суток Владислав!
Как я вижу по примеру, div2 занимает пространство div1
но из-за того, что в div1 не указан параметр overflow-x: hidden;
браузер создает дополнительное пространство!

5
  • Что Вы имеете ввиду? Если ставить overflow-x: hidden; в div1 тогда пропадет горизонтальный скролл. 3 июл 2019 в 14:23
  • Извините, я это имел ввиду. Я не знал что вам нужна полоска с низу. В данном случае, ваша задача нереалистичная, по скольку у вас в div3 задано width: 1000px; поскольку обычное ограничение overflow-x (или же по ширине) примерно 312px. 3 июл 2019 в 14:39
  • В div3 размещены элементы неизвестное количество. width может быть разным. 3 июл 2019 в 14:41
  • Отлично! Тогда уберите на время в div3 'width: 1000px;' и посмотрите на результат. 3 июл 2019 в 14:42
  • Убрал, поставил как будет более реально. Смотрите код в вопросе. 3 июл 2019 в 14:48

Ваш ответ

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

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