Вопрос по html, css –  чтобы:

76

делать так, чтобы 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, чтобы заполнить остаток?

Мне нужно было противоположное, фиксированный центр ширины div и жидкость снаружи div. Я добавил ответ внизу, если кому-то еще это нужно. damndaewoo
Для получения актуального правильного ответа измените выбранный лучший ответ на ответ Адриен Бе. edwardtyl

Ваш Ответ

7   ответов
36

и они фантастические. Я давно хотел чего-то подобного от 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/

@ ThinkBonobo, что вы подразумеваете под "это"? Гибкая коробка сама по себе будет действовать как «блок», и элементы внутри гибкой коробки могут определенно занимать больше места, чем требуется. B T
@ ThinkBonobo Бьюсь об заклад, я мог бы сделать это для вас, если вы разместили jsFiddle B T
Пробовал, просто понравилось! Raj Pawan Gumdal
@BT это означает основной центральный див. Это определенно решение работает для многих случаев, но не для моего конкретного случая использования. ThinkBonobo
Flexbox великолепен, но он занимает столько места, сколько ему нужно, а не все оставшееся пространство. Таким образом я пошел с переполнением: автоматическое решение. ThinkBonobo
4

который должен занимать оставшееся пространство, должен быть классом. Другие div могут быть идентификаторами, но они должны иметь ширину.

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
45
Современное решение (октябрь 2014 г.): готово к разводкеВведение:

Leigh, Это на самом деле основано на этом.

Здесь вы можете заметить, что средний элемент (в нашем случае, с"content__middle" класс) делаетне указать любое размерное свойство - ни ширину, ни заполнение, ни свойство, связанное с полем, - но толькоoverflow: auto; (см. примечание 1).

Большое преимущество в том, что сейчасВы можете указатьmax-width иmin-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 в следующих веб-браузерах:

От IE7 до IE11Ff 20, Ff 28Safari 4.0 (Windows XP), Safari 5.1 (Windows XP)Хром 20, Хром 25, Хром 30, Хром 33,Опера 20
Да, это сделал.developer.mozilla.org/en-US/docs/Web/Guide/CSS/... было очень полезно. в конечном итоге с помощьюoverflow-y: hidden а) а) разрешенная ширина, б) лучшая поддержка браузера и в) не таблица Jayen
Привет Джейсон, это очень интересно, спасибо за указание на это. Можете ли вы предоставить jsfiddle, чтобы показать живой пример, когда это происходит? Adrien Be
это потому чтоoverflow создает контекст форматирования блока? было быdisplay: flex иметь такой же эффект? Jayen
Я бы порекомендовал всем разработчикам использовать этот метод, тем более что адаптивный веб-дизайн стал необходимостью. :) AUllah1
Осторожнее с этим. В некоторых случаях полоса прокрутки появится в div content__middle в Firefox, если высоты не точны из-за переполнения: auto; Jason
4

Хотя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>

Этот метод работает как магия, ноВот это объяснение :)

Возьмите с собой подобный образец здесь.

1

где мне требовался фиксированный 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 элемент, то вам нужно обновить свойство ширины.fluid чтобы:

width: calc(50% - [half of center width]px);
62

Попробуйте что-то вроде этого:

<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» в HTML

Есть ли способ сделать это без изменения порядка элементов? то есть левый, средний, правый. Это важно, если вы хотите делать разные вещи на разных размерах экрана. Eliezer Steinbock
Связанныйalistapart.com/article/holygrail Adrien Be
Я думаю, что нашел еще лучшее решение на основе вашего (отличного) решения :) см. Ниже в ответе, который я предоставляю Adrien Be
Да, этот порядок левого-правого-среднего действительно хитрость. Это запрещает правильному div не идти под двумя div, верно? Ansjovis86
11
Решение Flexbox

..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>

Примечание: Добавьте префиксы поставщика Flex, если этого требует вашподдерживаемые браузеры.

Сейчас уже немного поздно для комплиментов, но серьезно, это хорошие вещи. Люблю флексбокс! simon
это должно быть сейчас - 2017 год - принятый ответ, даже другие ответы flexbox не так хороши. dippas

Похожие вопросы