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

https://stackoverflow.com/questions/1260122

12-09-2019
|

Вопрос

Мне нужен макет 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 соответствовал оставшейся ширине потому что мне нужны два столбца, оба выровнены по левому краю

Решение

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

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

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

Демо-версии:

Фиксированный Левый: http://jsfiddle.net/A8zLY/5/
Исправлено Верно: http://jsfiddle.net/A8zLY/2/

Другие советы

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

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

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

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

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

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

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

Ознакомьтесь с этим решением

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

Вот, это может помочь...

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

Решение Flexbox

Это то, что flex-grow собственность предназначена для.

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

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

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

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

Я не понимаю, почему люди готовы так усердно работать, чтобы найти чисто CSS-решение для простых столбчатых макетов, которые ТАК ПРОСТЫ при использовании старого 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>

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

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

Ты можешь попробовать Макет сетки CSS.

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>

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

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

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

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

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

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

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

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

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

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

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

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

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

Если для параметра 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>

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

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

Если вы используете 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.

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

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

Вы можете использовать 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

Это довольно просто с помощью flexbox.Смотрите фрагмент ниже.Я добавил контейнер-оболочку для управления потоком и установил глобальную высоту.Также были добавлены границы для идентификации элементов.Обратите внимание, что теперь divs также расширяются на всю высоту по мере необходимости.Префиксы поставщика должны использоваться для 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>

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

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

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

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow