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

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

501 голосов
/ 11 августа 2009

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

Ответы [ 21 ]

1 голос
/ 31 октября 2015

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

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

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

1 голос
/ 06 февраля 2014

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

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

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

1 голос
/ 01 июня 2011

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

.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 голос
/ 13 декабря 2009

Спасибо за плагин 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, так что помогите распространить информацию!

1 голос
/ 08 ноября 2018

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>
0 голосов
/ 11 августа 2009

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

0 голосов
/ 12 августа 2018

Это довольно легко, используя 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 голосов
/ 11 августа 2009

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

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

<div style="width: <=% getViewWidth() %>">View</div>
0 голосов
/ 07 августа 2017

Вы можете использовать библиотеку 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 голосов
/ 11 марта 2017

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