Разверните div, чтобы взять оставшуюся ширину

Question

Разверните div, чтобы взять оставшуюся ширину

450

Мне нужна двухблочная div-маска, где каждый может иметь переменную ширину, например.

div {
    float: left;
}
.second {
    background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

Я хочу, чтобы div 'view' расширялся до всей ширины, доступной после того, как div дерева заполнил необходимое пространство. В настоящее время мой div 'view' изменен для контента, содержащего его Также хорошо, если оба divs занимают целую высоту

Не дублировать отказ:

Развернуть div до максимальной ширины, когда float: left установлен потому что левая имеет фиксированную ширину.

Справка с div-make div соответствует оставшейся ширине потому что мне нужны два столбца, выровненные влево

Anurag Uniyal 11 авг. 2009, в 12:55

Источник

1

связанный stackoverflow.com/a/22719552/759452
Adrien Be 27 янв. 2015, в 09:45
1

Либо я не понимаю вопрос, либо я не понимаю, как вы выбираете принятый ответ, потому что там и ширина, и высота зафиксированы с неудобством overflow hidden
user10089632 21 нояб. 2017, в 23:45

Теги:

html

css

css3

multiple-columns

19 ответов

39

Я только что открыл магию гибких ящиков (display: flex). Попробуйте следующее:

<style>
  #box {
    display: flex;
    float: left;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

Ящики с флешками дают мне контроль, который я пожелал css в течение 15 лет. Наконец-то здесь! Дополнительная информация: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

B T 28 май 2015, в 04:02

0

Я не знаю, что вы обнаружили, но ваш код не работает в последнем Chrome jsfiddle.net/fjb548kw/3
Yevgeniy Afanasyev 11 авг. 2018, в 03:23
0

@YevgeniyAfanasyev Я удалил "поплавок: слева"; чтобы исправить проблему. Спасибо за примечание!
B T 13 авг. 2018, в 22:44
0

Спасибо. Не могли бы вы объяснить, почему у вас есть flex-grow: 100; вместо flex-grow: 1; ?
Yevgeniy Afanasyev 14 авг. 2018, в 05:01
1

@YevgeniyAfanasyev Нет особой причины, кроме того, как мне нравится это делать. Это позволяет мне думать в процентах, поэтому, если бы я мог сделать что-то вроде установки #a для flex-grow:10 а затем я бы установил #b для flex-grow: 90 так что #a будет 10% ширины линии и # b будет 90% ширины линии. Если никакие другие элементы не имеют стиля гибкой ширины, то технически не имеет значения, что вы положили.
B T 14 авг. 2018, в 23:41

Показать ещё 2 комментария

24

Это будет хорошим примером того, что тривиально делать с таблицами и трудно (если не невозможно, по крайней мере в смысле кросс-браузера) делать с CSS.

Если оба столбца были фиксированной шириной, это было бы легко.

Если один из столбцов был фиксированной шириной, это было бы немного сложнее, но вполне выполнимо.

В обоих столбцах переменной ширины IMHO вам нужно просто использовать таблицу с двумя столбцами.

cletus 11 авг. 2009, в 13:16

11

Таблица не будет очень хорошей в адаптивном дизайне, где вы хотите, чтобы правая колонка скользила под левой на маленьких устройствах.
S.. 21 март 2014, в 22:35
1

Есть несколько приемов адаптивного дизайна для работы с таблицами: css-tricks.com/responsive-data-tables
Rikki 02 май 2015, в 14:32
0

Сейчас я часто полностью разрабатываю два отдельных макета и меняю их на мобильном телефоне с помощью медиа-запросов и display:none; Несмотря на то, что на скользящей шкале вы получаете максимально 100% отзывчивость, иногда лучше полностью изменить дизайн, чтобы использовать мобильное устройство с сенсорным экраном и стилем кнопок.
Bysander 02 сен. 2015, в 13:20

Показать ещё 1 комментарий

18

Проверьте это решение

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}

<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>

angel.dimitrov 13 янв. 2014, в 18:06

2

Как правило, это лучшее решение, потому что скрытие переполнения не всегда желательно.
Joseph Lennox 17 дек. 2014, в 23:04
3

Для OP: «Я хочу двухстолбцовый макет div, где каждый может иметь переменную ширину». В своем ответе вы должны знать ширину первого столбца, чтобы она не была переменной. Вы могли бы также установить фиксированную ширину в обоих столбцах и просто плавать их.
Jacob Alvarez 25 нояб. 2015, в 21:06

15

Здесь это может помочь...

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>

a6hi5h3k 11 авг. 2009, в 13:17

0

+1, потому что ваш пример, кажется, работает, но в моем реальном сценарии некоторые из того, как содержимое «view» заползает в div «tree», так как div дерева не равен 100%, может быть каким-то javascript заставляет его быть маленьким и после высоты дерева Я вижу содержимое просмотра
Anurag Uniyal 12 авг. 2009, в 06:21
0

В этом случае, если вы знаете максимальную ширину левого столбца, вы можете либо присвоить ему стиль max-width (не работает в IE), либо подумать о margin-left (остерегайтесь ошибки двойного поля в IE) или обивка налево.
a6hi5h3k 15 авг. 2009, в 01:13
0

Это было здорово! Я использую его как одноразовое решение: <div class="clear" style="clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px;"></div>
ajwest 10 март 2015, в 23:55

Показать ещё 1 комментарий

8

Используйте calc. example`

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}

<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

Проблема с этим заключается в том, что все ширины должны быть хорошо определены либо как значение (px, так и em работают нормально) или как процент чего-то, что хорошо отделяет его.

`

joel Moses 09 март 2016, в 07:35

0

лучшее решение, когда ширина первого столбца фиксирована. +1
Ivan 02 июль 2018, в 07:51

5

Flexbox решение

html, body {
  height: 100%;
}
.wrapper {
  display: flex;
  height: 100%;
}
.second {
  flex-grow: 1;
}

<div class="wrapper">
  <div style="background: #fc9;">Tree</div>
  <div class="second" style="background: #ccc;">View</div>
</div>

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

Reggie Pinkham 06 нояб. 2016, в 09:03

5

Я не понимаю, почему люди готовы так усердно работать, чтобы найти решение с чистым CSS для простых макетов столбцов, которые SO EASY используют старый тег TABLE.

У всех браузеров все еще есть логика компоновки таблиц... Назовите меня, возможно, динозавром, но я говорю, пусть это поможет вам.

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

Гораздо менее рискованно с точки зрения совместимости между браузерами.

PatM 09 дек. 2010, в 08:10

2

да, но если все делает css, почему бы и нет, по крайней мере, любопытство, если это возможно?
Anurag Uniyal 09 дек. 2010, в 14:46
1

Это потому, что если вы хотите разместить media-queries для размещения обоих столбцов друг над другом на небольших устройствах, это невозможно с помощью старого тега table . Чтобы это работало, вам нужно применить стили таблиц CSS . Итак, в настоящее время лучше решить эту проблему с помощью CSS если вы хотите адаптивный макет для любого размера экрана.
ElChiniNet 02 июнь 2017, в 10:42

3

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="right">View</div>
    <div style="width: <=100% getTreeWidth()100 %>">Tree</div>
    <div class="clear" />
  </div>
  <div class="ColumnWrapper">
    <div class="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
  </div>

</body>

</html>

A.Pramod Kumar 19 янв. 2011, в 10:08

0

Я хочу что-то вроде строки состояния с фиксированными элементами слева, фиксированными элементами справа и одной строкой сообщения, которая использует все оставшееся пространство. Я начал с этого ответа и добавил свое сообщение div ПОСЛЕ плавания с: height: 20px; пустое пространство: nowrap; переполнение: скрытое; текст переполнение: клип
englebart 14 авг. 2017, в 20:15

1

Вы можете попробовать CSS Grid Layout.

dl {
  display: grid;
  grid-auto-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}

<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>

canon 15 авг. 2017, в 17:24

1

Несколько другая реализация,

Две панели div (содержимое + дополнительная), бок о бок, content panel расширяются, если extra panel нет.

jsfiddle: http://jsfiddle.net/qLTMf/1722/

Rao 06 фев. 2014, в 13:57

1

Пэт - Ты прав. Вот почему это решение удовлетворит как "динозавров", так и современников.:)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
  <style type="text/css">
    .btnCont {
      display: table-layout;
      width: 500px;
    }
    .txtCont {
      display: table-cell;
      width: 70%;
      max-width: 80%;
      min-width: 20%;
    }
    .subCont {
      display: table-cell;
      width: 30%;
      max-width: 80%;
      min-width: 20%;
    }
    .txtCont .ip {
      width: 100%;
      max-width: 100%;
      min-width: 30%
    }
  </style>
</head>

<body>
  <div class="btnCont">
    <div class="txtCont">Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!</div>
    <div class="subCont">This column as well as the entire container works like a table. Isn't Amazing!!!</div>
  </div>
</body>

</html>

johnmanoahs 01 июнь 2011, в 10:26

2

Нет ссылки на HTML для класса CSS .ip, и он не работает в IE7
Keith K 02 июнь 2011, в 07:45

1

Спасибо за пробную версию Simpl.css!

Не забудьте обернуть все ваши столбцы в ColumnWrapper так.

<div class="ColumnWrapper">
    <div class="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
</div>

Я собираюсь выпустить версию 1.0 Simpl.css, чтобы помочь распространить это слово!

Shaggy 13 дек. 2009, в 02:32

0

Как использовать функцию calc, если вы используете последние браузеры (IE >= 9, FF >= 19, chrome >= 26, safari >= 6), а ширина другого раздела в той же строке фиксирована?

width: calc(100% - 20px)

Вместо 20px вы можете записать фиксированную ширину другого раздела в той же строке. Таким образом, ширина будет вычисляться и применяться, т.е. Оставшаяся ширина.

P.S. Нет поддержки Opera!: (

anit 30 окт. 2015, в 21:35

0

Я не уверен, что это ответ, который вы ожидаете, но почему бы вам не установить ширину дерева в "auto" и ширину "View" до 100%?

anonymous 11 авг. 2009, в 13:01

2

Потому что это поместит второй поплавок ниже первого, потому что он слишком широкий.
cletus 11 авг. 2009, в 12:50

-1

Я написал функцию javascript, которую я вызываю из jQuery $(document).ready(). Это проанализирует все дочерние элементы родительского div и обновит только правильное большинство дочерних элементов.

HTML

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

Javascript

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}

Brian bcr666 Ray 11 март 2017, в 06:31

-2

вы можете использовать библиотеку W3.CSS, которая содержит класс rest ':

<!DOCTYPE html>
 <html>
   <link rel="stylesheet" href="/w3.css">
   <body>
    <div class="w3-row">
      <div class="w3-col " style="width:150px"><p>150px</p></div>
      <div class="w3-rest w3-green"><p>w3-rest</p></div>
    </div>
   </body>
 </html>

не забудьте связать css-библиотеку W3 в заголовке html-страницы:

<link rel="stylesheet" href="/w3.css">

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_grid_rest&stacked=h

manar 07 авг. 2017, в 14:48

-2

Посмотрите на доступные рамки компоновки CSS. Я бы рекомендовал Simpl или немного более сложную структуру Blueprint.

Если вы используете Simpl (который включает в себя импорт только одного файла simpl.css), вы можете сделать это:

<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>

для макета 50-50 или:

<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>

для 25-75 единиц.

Это просто.

vikas 11 авг. 2009, в 13:27

0

будут ли оба столбца переменной ширины?
Anurag Uniyal 12 авг. 2009, в 06:00

-4

Если обе ширины переменной длины, почему вы не вычисляете ширину с помощью некоторых скриптов или серверов?

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>

amischiefr 11 авг. 2009, в 14:31

3

Как сервер узнает, как будет работать механизм компоновки клиента?
Kev 11 авг. 2009, в 13:07
0

Все просто: разработайте его для 90% браузеров :) IE 7+, FF3 + и Safari поддерживают CSS 3. Вы также можете включить стандартный элемент IE6 <! - [if lte IE 6]>. Кстати, какой браузер не поддерживает style = "width:%" ??
amischiefr 11 авг. 2009, в 13:25
0

Я не знаю, как это можно сделать на стороне сервера, но да, некоторые JavaScript могут это сделать, но я хочу избежать этого, если css / html не может это сделать
Anurag Uniyal 12 авг. 2009, в 05:59
0

Который не может. Поэтому, если вы хотите, чтобы оба были динамическими, вы должны сделать это либо на стороне сценария, либо на стороне сервера.
amischiefr 12 авг. 2009, в 12:21

Показать ещё 2 комментария

Ещё вопросы

Либо я не понимаю вопрос, либо я не понимаю, как вы выбираете принятый ответ, потому что там и ширина, и высота зафиксированы с неудобством overflow hidden
Я не знаю, что вы обнаружили, но ваш код не работает в последнем Chrome jsfiddle.net/fjb548kw/3
@YevgeniyAfanasyev Я удалил "поплавок: слева"; чтобы исправить проблему. Спасибо за примечание!
Спасибо. Не могли бы вы объяснить, почему у вас есть flex-grow: 100; вместо flex-grow: 1; ?
@YevgeniyAfanasyev Нет особой причины, кроме того, как мне нравится это делать. Это позволяет мне думать в процентах, поэтому, если бы я мог сделать что-то вроде установки #a для flex-grow:10 а затем я бы установил #b для flex-grow: 90 так что #a будет 10% ширины линии и # b будет 90% ширины линии. Если никакие другие элементы не имеют стиля гибкой ширины, то технически не имеет значения, что вы положили.
Таблица не будет очень хорошей в адаптивном дизайне, где вы хотите, чтобы правая колонка скользила под левой на маленьких устройствах.
Есть несколько приемов адаптивного дизайна для работы с таблицами: css-tricks.com/responsive-data-tables
Сейчас я часто полностью разрабатываю два отдельных макета и меняю их на мобильном телефоне с помощью медиа-запросов и display:none; Несмотря на то, что на скользящей шкале вы получаете максимально 100% отзывчивость, иногда лучше полностью изменить дизайн, чтобы использовать мобильное устройство с сенсорным экраном и стилем кнопок.
Как правило, это лучшее решение, потому что скрытие переполнения не всегда желательно.
Для OP: «Я хочу двухстолбцовый макет div, где каждый может иметь переменную ширину». В своем ответе вы должны знать ширину первого столбца, чтобы она не была переменной. Вы могли бы также установить фиксированную ширину в обоих столбцах и просто плавать их.
+1, потому что ваш пример, кажется, работает, но в моем реальном сценарии некоторые из того, как содержимое «view» заползает в div «tree», так как div дерева не равен 100%, может быть каким-то javascript заставляет его быть маленьким и после высоты дерева Я вижу содержимое просмотра
В этом случае, если вы знаете максимальную ширину левого столбца, вы можете либо присвоить ему стиль max-width (не работает в IE), либо подумать о margin-left (остерегайтесь ошибки двойного поля в IE) или обивка налево.
Это было здорово! Я использую его как одноразовое решение: <div class="clear" style="clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px;"></div>
лучшее решение, когда ширина первого столбца фиксирована. +1
да, но если все делает css, почему бы и нет, по крайней мере, любопытство, если это возможно?
Это потому, что если вы хотите разместить media-queries для размещения обоих столбцов друг над другом на небольших устройствах, это невозможно с помощью старого тега table . Чтобы это работало, вам нужно применить стили таблиц CSS . Итак, в настоящее время лучше решить эту проблему с помощью CSS если вы хотите адаптивный макет для любого размера экрана.
Я хочу что-то вроде строки состояния с фиксированными элементами слева, фиксированными элементами справа и одной строкой сообщения, которая использует все оставшееся пространство. Я начал с этого ответа и добавил свое сообщение div ПОСЛЕ плавания с: height: 20px; пустое пространство: nowrap; переполнение: скрытое; текст переполнение: клип
Нет ссылки на HTML для класса CSS .ip, и он не работает в IE7
Потому что это поместит второй поплавок ниже первого, потому что он слишком широкий.
будут ли оба столбца переменной ширины?
Как сервер узнает, как будет работать механизм компоновки клиента?
Все просто: разработайте его для 90% браузеров :) IE 7+, FF3 + и Safari поддерживают CSS 3. Вы также можете включить стандартный элемент IE6 <! - [if lte IE 6]>. Кстати, какой браузер не поддерживает style = "width:%" ??
Я не знаю, как это можно сделать на стороне сервера, но да, некоторые JavaScript могут это сделать, но я хочу избежать этого, если css / html не может это сделать
Который не может. Поэтому, если вы хотите, чтобы оба были динамическими, вы должны сделать это либо на стороне сценария, либо на стороне сервера.

Xanthir · Accepted Answer · 2009-11-19T23-30-00.000Z

904

Лучший ответ

Решение этого на самом деле очень просто, но не совсем очевидно. Вы должны вызвать что-то, называемое "контекстом форматирования блоков" (BFC), который определенным образом взаимодействует с поплавками.

Просто возьмите этот второй div, удалите float и принесите его overflow:hidden. Любое значение переполнения, отличное от видимого, делает блок, который он устанавливает, становится BFC. BFC не позволяют потокам-потомкам избегать их, а также не позволяют им перемещаться в них. Чистый эффект здесь заключается в том, что плавающий div будет делать это, тогда второй div будет обычным блоком, занимающим всю доступную ширину, за исключением того, что занято поплавком.

Это должно работать во всех существующих браузерах, хотя вам, возможно, придется запускать hasLayout в IE6 и 7. Я не могу вспомнить.

Demos:

Фиксированный левый: http://jsfiddle.net/A8zLY/5/
Fixed Right: http://jsfiddle.net/A8zLY/2/

Xanthir 19 нояб. 2009, в 23:30

0

Похоже, что он работает в режиме совместимости IE 7 с IE 7 без hasLayout, поэтому я предполагаю, что IE 7 не требует hasLayout.
Orion Adrian 09 май 2011, в 17:33
26

Отличный ответ! Но вы ошибаетесь, когда говорите, что «любое значение переполнения, отличное от auto», сделает его BFC. Вы имеете в виду, что любое значение переполнения, отличное от значения по умолчанию (видимого), сделает его BFC. На самом деле, переполнение авто тоже отлично работает - это то, что я бы порекомендовал (на тот случай, если у вас есть относительно позиционированные элементы, которые могут выглядывать из этого div).
B T 28 май 2011, в 18:33
50

Эта статья имеет хорошее объяснение: colinaarts.com/articles/the-magic-of-overflow-hidden
Max Cantor 20 окт. 2011, в 18:53
1

Что если контент достаточно большой, чтобы переполнить div?
giannis christofakis 29 янв. 2012, в 17:05
0

Не работает для IE6 без вещи hasLayout, как вы указали. Добавление zoom:1 сработало для меня.
Roger 09 авг. 2012, в 14:32
4

вот jsfiddle: jsfiddle.net/qLTMf/1071
maxwell2022 14 март 2013, в 05:47
0

Это не работает в Firefox или Chrome, где нет элементов div, для которых установлено display:block .
Cerin 06 нояб. 2013, в 22:37
1

хороший ответ но почему тот же принцип не действителен для "плавать: правильно"?
Andrade 30 апр. 2014, в 18:45
0

@Andrade Это действительно, если вы имеете в виду «я могу использовать вместо этого float: right для боковой панели?». Полностью все еще работает. Если вы имеете в виду «почему я не могу просто использовать float: right для основной области», это по той же причине float: left не работает - он сокращает содержимое.
Xanthir 25 июнь 2014, в 00:23
0

@Xanthir Я раздвоил твой jsfiddle, чтобы создать другой вопрос. Как вы расширяете вход, чтобы взять оставшуюся ширину? stackoverflow.com/questions/26106659/...
coder 29 сен. 2014, в 18:46
0

Может ли эта техника работать несколько раз во вложении?
Meglio 06 окт. 2014, в 15:38
0

Скрипка «фиксированный правый» должна иметь «.container {width: 100%; ...», чтобы показать его полную прохладу.
Juan Lanus 26 нояб. 2014, в 18:48
0

Если я .left все CSS из .left кроме height , он все равно займет всю оставшуюся ширину. Если я изменю display на что-либо, кроме block это не сработает. (Firefox 34.0)
Yuval A. 22 дек. 2014, в 02:48
0

@Xanthir Отличное решение! Но в первом jsfiddle div, который на самом деле отображается слева, имеет класс 'right' и наоборот.
Traubenfuchs 30 янв. 2015, в 18:34
0

Переполнение не требуется, просто поместите div переменной длины в последний (так, чтобы он вычислялся последним). См. Jsfiddle.net/wangzhihao/A8zLY/2258
wang zhihao 08 июль 2015, в 13:46
1

Неправильно. Без «переполнения» (или какого-либо другого средства запуска BFC) div переменной длины не будет «избегать» другого div. Его текст будет избегать плавающих элементов div, но его фон / border / etc будет охватывать их, что, вероятно, не то, что нужно.
Xanthir 09 июль 2015, в 18:38
9

Важно отметить, что порядок детей имеет значение. Плавающий элемент с фиксированной шириной должен быть выше другого. Мне потребовалось слишком много времени, чтобы понять, почему это не сработало для меня с измененным порядком.
Riplexus 12 окт. 2015, в 11:46
2

Я написал ответ, объясняющий, почему невидимое переполнение всех вещей запускает BFC, основываясь на ответах, данных Дэвидом и Борисом, которые можно найти здесь: stackoverflow.com/questions/9943503/… Была ли моя интерпретация правильной?
BoltClock♦ 18 нояб. 2015, в 16:29
0

Есть ли способ сделать оба столбца всегда одинаковой высоты и выровнять содержимое? jsfiddle.net/A8zLY/3334
Tieme 06 янв. 2016, в 19:00
0

Да, используйте Flexbox. Floats никогда не предназначались для такого рода макетов, они были просто обязательным взломом, прежде чем Flexbox (и теперь Grid) существовал, чтобы сделать это правильно.
Xanthir 25 янв. 2016, в 03:05
0

«фиксированная левая» скрипка имеет поле слева. Справа и поле справа справа, что поначалу довольно запутанно. :П
Skeets 04 янв. 2017, в 18:36
0

когда гибкая часть является входом, она не будет работать, даже если она настроена на отображение: блок, есть идеи?
wutzebaer 26 июнь 2017, в 10:02
0

Обновленный твик на вашей скрипке с использованием flexbox, который позволяет вам использовать это поведение без указания точной ширины: jsfiddle.net/xseoa9rk
fotijr 08 дек. 2017, в 15:43
0

@fotijr: Отличная новость, спасибо за хедз-ап / напоминание о flex-grow !
Sz. 17 март 2018, в 13:12
0

Ссылка на «магию переполнения» больше не действительна, новая - colinaarts-com.herokuapp.com/articles/…
Fernando Gonzalez Sanchez 30 май 2018, в 22:11

Показать ещё 23 комментария