it-swarm.com.ru

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

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

div {
    float: left;
}
.second {
    background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>

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

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

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

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

489
Anurag Uniyal

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

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

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

Демоверсии:

962
Xanthir

Я только что открыл магию флексбоксов (дисплей: флекс). Попробуй это:

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

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

72
B T

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

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

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

С обоими столбцами переменной ширины, ИМХО, вам нужно просто использовать таблицу из двух столбцов.

26
cletus

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

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

21
angel.dimitrov

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

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

15
a6hi5h3k

Используйте calc:

.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 работают нормально), либо как процент от чего-то явно определенного самого себя.

12
joel Moses

Решение 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, если это требуется вашими поддерживаемыми браузерами .

11
Reggie Pinkham

Я не понимаю, почему люди хотят так усердно работать, чтобы найти решение на чистом CSS для простых столбчатых макетов, которые SO ЛЕГКО используют старый тег 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>

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

5
PatM

<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="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
  </div>

</body>

</html>

3
A.Pramod Kumar

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

dl {
  display: grid;
  grid-template-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>

3
canon

Немного другая реализация, 

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

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

1
Rao

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

.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%;
}
<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>

1
johnmanoahs

Спасибо за плагин Simpl.css!

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

<div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
</div>

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

1
Shaggy

flex-grow - определяет способность элемента flex расти в случае необходимости. Он принимает значение без единицы, которое служит пропорцией. Он определяет, какое количество доступного пространства внутри гибкого контейнера должно занимать элемент.

Если для всех элементов flex-grow установлено значение 1, оставшееся пространство в контейнере будет распределено поровну между всеми дочерними элементами. Если один из дочерних элементов имеет значение 2, оставшееся пространство займет в два раза больше места, чем остальные (или попытается, по крайней мере). Подробнее здесь

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}
<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>

1
Stanislav Ostapenko

Если ширина другого столбца фиксирована, как насчет использования calc CSS-функции для всех распространенных браузеров :

width: calc(100% - 20px) /* 20px being the first column's width */

Таким образом, ширина второго ряда будет рассчитана (то есть оставшаяся ширина) и применена соответственно. 

1
anit

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

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

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

Не забудьте связать библиотеку CSS в странице header:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Вот официальная демонстрация: W3 School Tryit Editor

0
manar

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

0
anonymous

Я написал функцию 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"));
            }
        });
    });
}
0
bcr666

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

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

<div class="Colum­nOne­Half">Tree</div>
<div class="Colum­nOne­Half">View</div>

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

<div class="Colum­nOne­Quarter">Tree</div>
<div class="Colum­nThreeQuarters">View</div>

для 25-75.

Это так просто.

0
vikas

Это довольно легко, используя flexbox. Смотрите фрагмент ниже. Я добавил контейнер-обертку для управления потоком и установил глобальную высоту. Границы были добавлены, чтобы идентифицировать элементы. Обратите внимание, что теперь div'ы также расширяются до полной высоты, как требуется. Префиксы поставщика должны использоваться для flexbox в реальном сценарии, поскольку они еще не полностью поддерживаются.

Я разработал бесплатный инструмент для понимания и разработки макетов с помощью flexbox. Проверьте это здесь: http://algid.com/Flex-Designer

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}
<div class="container">
    <div>Tree</div>
    <div class="second">View</div>
</div>

0
Mario Vázquez