Как я могу заставить div заполнить оставшуюся ширину?
<div id="Main" style="width: 500px;">
<div id="div1" style="width: 100px;"></div>
<div id="div2"></div>
<div id="div3" style="width: 100px; float: right;"></div>
</div>
Как мне div2
пополнить остаток?
Ответы:
Попробуйте что-то вроде этого:
<style> #divMain { width: 500px; } #left-div { width: 100px; float: left; background-color: #fcc; } #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; } #right-div { width: 100px; float: right; background-color: #ccf; } </style> <div id="divMain"> <div id="left-div"> left div </div> <div id="right-div"> right div </div> <div id="middle-div"> middle div<br />bit taller </div> </div>
div, естественно, занимают 100% ширины своего контейнера, нет необходимости явно устанавливать эту ширину. Добавляя левое / правое поле, такое же, как у двух боковых div, его собственное содержимое вынуждено располагаться между ними.
Обратите внимание, что «средний div» идет после «правого div» в HTML.
источник
Современное решение (октябрь 2014 г.): готово для гибких макетов
Введение:
Это решение даже проще, чем то, что предлагает
Leigh
. На самом деле он основан на нем.Здесь вы можете заметить, что средний элемент (в нашем случае с
"content__middle"
классом) не имеет никаких размерных свойств - ни ширины, ни отступов, ни свойства, связанного с полями, - а толькоoverflow: auto;
(см. Примечание 1).Большим преимуществом является то, что теперь вы можете указать a
max-width
и amin-width
для левого и правого элементов . Что отлично подходит для гибких макетов ... отсюда и отзывчивый макет :-)примечание 1: по сравнению с ответом Ли, где вам нужно добавить свойства
margin-left
&margin-right
в"content__middle"
класс.Код с неглавным макетом:
Здесь левый и правый элементы (с классами
"content__left"
и"content__right"
) имеют фиксированную ширину (в пикселях): отсюда это называется нефиксированной компоновкой.Живая демонстрация на http://jsbin.com/qukocefudusu/1/edit?html,css,output
<style> /* * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left * [2] "overflow: auto;" makes this div take the remaining width */ .content { width: 100%; } .content__left { width: 100px; float: left; /* [1] */ background-color: #fcc; } .content__middle { background-color: #cfc; overflow: auto; /* [2] */ } .content__right { width: 100px; float: right; /* [3] */ background-color: #ccf; } </style> <div class="content"> <div class="content__left"> left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/> </div> <div class="content__right"> right div<br/>right div<br/>right div<br/>right div<br/> </div> <div class="content__middle"> middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller </div> </div>
Код с плавным макетом:
Здесь левый и правый элементы (с классами
"content__left"
и"content__right"
) имеют переменную ширину (в процентах), а также минимальную и максимальную ширину: отсюда и название «гибкий макет».Живая демонстрация в гибком макете со
max-width
свойствами http://jsbin.com/runahoremuwu/1/edit?html,css,output<style> /* * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left * [2] "overflow: auto;" makes this div take the remaining width */ .content { width: 100%; } .content__left { width: 20%; max-width: 170px; min-width: 40px; float: left; /* [1] */ background-color: #fcc; } .content__middle { background-color: #cfc; overflow: auto; /* [2] */ } .content__right { width: 20%; max-width: 250px; min-width: 80px; float: right; /* [3] */ background-color: #ccf; } </style> <div class="content"> <div class="content__left"> max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/> </div> <div class="content__right"> max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/> </div> <div class="content__middle"> middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller </div> </div>
Поддержка браузера
Протестировано на BrowserStack.com в следующих веб-браузерах:
источник
overflow
создает контекст форматирования блока? будетdisplay: flex
иметь такой же эффект?overflow-y: hidden
как это а) разрешенную ширину, которая должна быть установлена, б) имеет лучшую поддержку браузера и в) не было таблицейFlex-боксы - это отличное решение. Я уже десять лет хотел чего-то подобного из css. Все, что вам нужно, это добавить
display: flex
к вашему стилю «Main» иflex-grow: 100
(где 100 произвольно - не важно, чтобы оно было ровно 100). Попробуйте добавить этот стиль (добавлены цвета, чтобы эффект был заметен):<style> #Main { background-color: lightgray; display: flex; } #div1 { border: 1px solid green; height: 50px; display: inline-flex; } #div2 { border: 1px solid blue; height: 50px; display: inline-flex; flex-grow: 100; } #div3 { border: 1px solid orange; height: 50px; display: inline-flex; } </style>
Подробнее о гибких коробках здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
источник
Для этого используйте свойство CSS Flexbox
flex-grow
..main { display: flex; } .col-1, .col-3 { width: 100px; } .col-2 { flex-grow: 1; }
<div class="main"> <div class="col-1" style="background: #fc9;">Left column</div> <div class="col-2" style="background: #eee;">Middle column</div> <div class="col-3" style="background: #fc9;">Right column</div> </div>
источник
Хотя
bit
опубликовать ответ поздно, вот альтернативный подход без использования полей.<style> #divMain { width: 500px; } #div1 { width: 100px; float: left; background-color: #fcc; } #div2 { overflow:hidden; background-color: #cfc; } #div3 { width: 100px; float: right; background-color: #ccf; } </style> <div id="divMain"> <div id="div1"> div 1 </div> <div id="div3"> div 3 </div> <div id="div2"> div 2<br />bit taller </div> </div>
Этот метод работает как по волшебству, но вот объяснение :)
Поиграйте с подобным образцом здесь.
источник
Div, который должен занимать оставшееся пространство, должен быть классом. Другие div могут иметь id, но они должны иметь ширину.
CSS :
#main_center { width:1000px; height:100px; padding:0px 0px; margin:0px auto; display:block; } #left { width:200px; height:100px; padding:0px 0px; margin:0px auto; background:#c6f5c6; float:left; } .right { height:100px; padding:0px 0px; margin:0px auto; overflow:hidden; background:#000fff; } .clear { clear:both; }
HTML :
<body> <div id="main_center"> <div id="left"></div> <div class="right"></div> <div class="clear"></div> </div> </body>
По следующей ссылке приведен код в действии, который должен решить оставшуюся проблему покрытия площади.
jsFiddle
источник
Я искал решение противоположной проблемы, когда мне нужен div с фиксированной шириной в центре и div с жидкой шириной с обеих сторон, поэтому я придумал следующее и решил опубликовать его здесь, если кому-то это понадобится.
#wrapper { clear: both; width: 100%; } #wrapper div { display: inline-block; height: 500px; } #center { background-color: green; margin: 0 auto; overflow: auto; width: 500px; } #left { float: left; } #right { float: right; } .fluid { background-color: yellow; width: calc(50% - 250px); }
<div id="wrapper"> <div id="center"> This is fixed width in the centre </div> <div id="left" class="fluid"> This is fluid width on the left </div> <div id="right" class="fluid"> This is fluid width on the right </div> </div>
Если вы измените ширину
#center
элемента, вам необходимо обновить свойство width.fluid
до:width: calc(50% - [half of center width]px);
источник