Блог

Главная - Вопросы по программированию - один div шириной 100% и два фиксированных divs в одной строке

один div шириной 100% и два фиксированных divs в одной строке

#css

#css

Вопрос:

Мне нужно три divs в одной строке.

Один имеет размер 200 пикселей, второй 300 пикселей, и последним div должно быть то, что осталось.

Почему мой последний div в новой строке?

 <div style="float: left; width: 200px; background: #223355">a</div>
<div style="float: left; width: 300px; background: #223344">b</div>
<div style="float: left; width: 100%; background: #334455">c</div>

Ответ №1:

КАК говорили другие, 100% — это 100% ширины страницы.. но я не согласен с пользователем, который говорит, что это невозможно сделать с помощью «простого» CSS

 <div style="float: left; width: 200px; background: #223355">a</div>
<div style="float: left; width: 300px; background: #223344">b</div>
<div style="overflow: hidden; background: #334455">c</div>

Ответ №2:

Разве вам не нужно просто удалить float: left; в последнем div, чтобы он работал?

Комментарии:

1. да, но любой текст в последнем «столбце» будет перенесен ниже первых двух, если вы также не добавите overflow: hidden; — зависит от варианта использования на самом деле

Ответ №3:

Потому что, указывая width: 100% , вы сказали третьему разделению div заполнить всю ширину страницы, а не только то, что осталось. Добавив пару оболочек div , вы можете получить что-то вроде этого:

 <div style="float: left; width: 100%">
   <div style="margin-left: 500px; background: #334455">c</div>
</div>

<div style="float: left; width: 500px; margin-left: -100%">
   <div style="width: 300px; float: left; background: #223355">a</div>
   <div style="width: 200px; float: right; background: #223344">b</div>
</div>

Который должен отображаться так, как вы этого хотите.

Ответ №4:

Потому что вы установили для него ширину 100%. Относительная ширина, такая как ваш процент, применяется к ширине РОДИТЕЛЬСКОГО элемента. Таким образом, если бы ваш контейнер для этих 3 разделов был размером 600 пикселей, то в итоге ваш третий div занял бы 100% от 600 пикселей, а не «оставшееся» пространство, которое заняли два других элемента.

То, что вы хотите, не может быть достигнуто с помощью простого CSS. Вам нужно было бы вычислить оставшееся пространство с помощью Javascript и установить ширину третьего div таким образом, или также сделать его фиксированной шириной.