Как заставить div заполнить оставшееся горизонтальное пространство?


419

У меня есть 2 элемента: один в левой части и один в правой части моей страницы. Тот, что слева, имеет фиксированную ширину, и я хочу, чтобы тот, что справа, заполнил оставшееся пространство.

#search {
  width: 160px;
  height: 25px;
  float: left;
  background-color: #ffffff;
}

#navigation {
  width: 780px;
  float: left;
  background-color: #A53030;
}
<div id="search">Text</div>
<div id="navigation">Navigation</div>


11
Удалите свойство width и float в #navigation, и оно будет работать.
Йохан Лейно


1
@alexchenco: возможно, вы захотите обновить выбранный вами ответ на вопрос, предоставленный Хэнком
Адриен Бе

@AdrienBe на самом деле, если вы посмотрите на ответ mystrdat, я думаю, что еще лучше. Это только одна строка css, и она единственная, которая сработала для меня (я делаю три столбца с помощью float: left; на первых двух с фиксированной шириной и переполнением: auto на последнем, и это прекрасно работает)
edwardtyl

@edwardtyl достаточно справедливо. На самом деле, похоже, что используется та же техника, что и в ответе, который я дал для stackoverflow.com/questions/4873832/…
Adrien Be

Ответы:


71

Это, кажется, для достижения того, что вы собираетесь.

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}
<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>


8
Вы должны удалить ширину: 100% на правом div, хотя, чтобы это работало.
Йохан Лейно

250
Это решение на самом деле имеет проблему. Попробуйте удалить цвет из левого элемента. Вы заметите, что цвет от правого элемента фактически скрывается под ним. Содержание, кажется, идет в правильное место, но сам ПРАВЫЙ div не является.
Vyrotek

5
+1 Решил и мою проблему тоже. То, что я узнал, было то, что мне нужно было удалить «float: left» на заполнении div. Я думал, что это заставит страницу взорваться
keyser

12
Возможно, приятно отметить, что замечание Vyroteks верно, но может быть решено с помощью переполнения: скрыто в правой колонке. Дензел упоминает об этом, но его ответ не принят, так что вы можете пропустить это ...
Ruudt

45
Это явно неправильно, правый элемент имеет полный размер, просто его содержимое перемещается вокруг левого элемента. Это не решение, просто еще большая путаница.
Mystrdat

268

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

Автор предлагает три различных способа: один фиксированной ширины, один с тремя переменными столбцами и один с фиксированными внешними столбцами и средней шириной переменной ширины. Гораздо более элегантно и эффективно, чем другие примеры, которые я нашел. Значительно улучшилось мое понимание макета CSS.

В основном, в простом случае выше, плавают первый столбец влево и задайте ему фиксированную ширину. Затем дайте столбцу справа левое поле, которое немного шире первого столбца. Вот и все. Выполнено. Код Аллы Баушли:

Вот демо-версия в стеке фрагментов и jsFiddle

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}
<div id="left">  left  </div>
<div id="right"> right </div>

На примере Бушли левый столбец содержит другой столбец справа. Как только левый столбец заканчивается, правый снова начинает заполнять все пространство. Здесь правый столбец просто выравнивается дальше по странице, а левый столбец занимает большой жирный край. Нет необходимости взаимодействия потоков.


Когда вы закрываете тег div, содержимое после этого div должно отображаться в новой строке, но этого не происходит. Не могли бы вы объяснить, почему?
Фуддин

должно быть: margin-left: 190px; ты забыл ';'. Также поле слева должно быть 180px.
Фуддин

4
Примечание: если вы хотите, чтобы элемент фиксированной ширины находился справа, обязательно поместите его первым в коде, иначе он все равно будет перенесен на следующую строку.
Тревор

2
@RoniTovi, плавающие элементы должны стоять перед неплавающими элементами в вашем html. jsfiddle.net/CSbbM/127
Хэнк

6
Итак, как это сделать, если вы хотите избежать фиксированной ширины? Другими словами, позволить левому столбцу быть настолько широким, насколько это необходимо, а правому столбцу взять остальное?
Патрик Салапски

126

Решение исходит из свойства display.

По сути, вам нужно сделать так, чтобы два div действовали как ячейки таблицы. Таким образом, вместо использования float:leftвам придется использовать display:table-cellоба div-элемента, а для динамической ширины div вы также должны установить width:auto;. Оба элемента должны быть помещены в контейнер шириной 100% со display:tableсвойством.

Вот CSS:

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

И HTML:

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

ВАЖНО: Для Internet Explorer вам нужно указать свойство float в динамическом div ширины, иначе пространство не будет заполнено.

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


3
Не работает, когда содержимое внутри div с шириной: auto больше, чем остальное пространство, доступное в области просмотра.
Натан Лойер

4
@einord, это решение не использует таблицы, и я знаю, что таблицы должны использоваться только для табличных данных. Итак, вне контекста здесь. Фактические таблицы и свойства display: table (+ другой вариант) - это совершенно разные вещи.
Михай Френтиу

1
@Mihai Frentiu, каким образом отображается: таблица отличается от фактического элемента таблицы? Я бы очень хотел узнать это, если это совершенно разные вещи, спасибо. =)
einord

2
@einord, использование таблиц HTML подразумевает определение всей структуры таблицы в коде HTML. Модель таблицы CSS позволяет вам заставить практически любой элемент вести себя как элемент таблицы без определения всего дерева таблицы.
Михай Френтиу

1
@ Михай Френтиу, спасибо за ответ. Но разве поведение элемента таблицы не составляет проблемы с использованием таблиц в качестве элементов дизайна?
Эйнорд

124

В наши дни вы должны использовать flexboxметод (может быть адаптирован для всех браузеров с префиксом браузера).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Дополнительная информация: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


См. Www.w3schools.com/cssref/css3_pr_flex-grow.asp для хорошего объяснения атрибута CSS. Простое современное решение, но может не работать в старых браузерах.
Эдвард

4
Flexbox FTW ... Я пробовал все другие решения в этой теме, ничего не работает, я пробую это решение flexbox, оно работает сразу ... классический CSS (то есть до появления flexbox и CSS-сетки) полностью отстой в макете ... правило гибкости и сетки :-)
Лев

Это должно быть принято в качестве выбранного решения для текущего времени. Кроме того, это единственное «не хакерское» решение.
Грег

это работает как оберег, спасая мой день!
lisnb

Цбаа (это должен быть принятый ответ)
Рио

104

Поскольку это довольно популярный вопрос, я склонен поделиться хорошим решением с использованием BFC.
Пример кодепа следующего здесь .

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

В этом случае overflow: autoзапускает контекстное поведение и заставляет правый элемент расширяться только до доступной оставшейся ширины, и он естественным образом расширяется до полной ширины, если .leftисчезает. Очень полезный и чистый трюк для многих макетов пользовательского интерфейса, но, возможно, сначала трудно понять, «почему он работает».


1
Браузерная поддержка переполнения. IE4 !!! w3schools.com/cssref/pr_pos_overflow.asp
Евгений Афанасьев

1
Иногда я получаю бесполезную горизонтальную полосу прокрутки на элементе .right. В чем проблема?
Патрик Салапски

1
@PatrickSzalapski Можете ли вы сделать коде или подобный случай? Переполнение autoможет вызвать это в зависимости от его содержимого. Вы также можете использовать любое другое значение переполнения, чтобы получить тот же эффект, который hiddenможет работать лучше для вашего случая.
Mystrdat 20.09.16

1
Что означает BFC, и есть ли хорошее общее руководство, объясняющее BFC в Интернете?
Лулалала

1
@lulalala это обозначает контекстное форматирование блока . Вот более подробное объяснение
бобо

23

Если вам не нужна совместимость со старыми версиями некоторых браузеров (например, IE 10 8 или менее), вы можете использовать calc()функцию CSS:

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

1
IE 9 и выше поддерживают атрибут calc. Единственная проблема с этим решением - возможно, мы не знаем ширину левого столбца или она изменяется.
Arashsoft

Что ж, это решение может быть ориентировано на гибкий случай и предполагает, что вы не знаете или вас не волнует ширина родительского контейнера. В вопросе @alexchenco сказал, что хочет заполнить «оставшееся место», так что ... я думаю, что это правильно :) и да, IE 9 также поддерживается, спасибо за примечание;)
Маркос Б.

15

Ответ @ Boushley был самым близким, однако есть одна проблема, которая не была решена. Право DIV занимает всю ширину браузера; содержимое занимает ожидаемую ширину. Чтобы лучше увидеть эту проблему:

<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>

http://jsfiddle.net/79hpS/

Содержимое находится в правильном месте (в Firefox), однако ширина неверна. Когда дочерние элементы начинают наследовать ширину (например, таблицу с width: 100%), им присваивается ширина, равная ширине браузера, из-за чего они переполняются справа от страницы и создают горизонтальную полосу прокрутки (в Firefox) или не плавают и толкаются вниз ( в хроме).

Вы можете легко это исправить , добавив overflow: hiddenв правую колонку. Это дает вам правильную ширину как для содержимого, так и для div. Кроме того, таблица получит правильную ширину и заполнит оставшуюся доступную ширину.

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

Если есть какие-либо проблемы или проблемы, не стесняйтесь поднимать их.


1
overflow: hiddenдействительно исправляет это, спасибо. (Отмеченный ответ неверен, кстати, поскольку на rightсамом деле занимает все доступное пространство на родительском, вы можете увидеть это во всех браузерах при проверке элементов)
huysentruitw

1
Кто-нибудь может объяснить, почему это работает точно? Я знаю, что где-то здесь видел хорошее объяснение, но не могу его найти.
tomswift

2
@tomswift Setting overflow: hiddenпомещает правый столбец в собственный контекст форматирования блока. Блочные элементы занимают все доступное им горизонтальное пространство. Смотрите: developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
Джон Курлак

overflow:xxxАтрибут является ключевым. Как вы говорите, он перестает #rightрасширяться снизу #left. Это очень аккуратно решает проблему, с которой я столкнулся при использовании изменяемого размера jQuery UI - с #rightустановленным атрибутом overflow и #leftустановленным изменяемым размером у вас есть простая подвижная граница. См. Jsfiddle.net/kmbro/khr77h0t .
КБРО

13

Вот небольшое исправление для принятого решения, которое предотвращает попадание правого столбца под левый столбец. Заменены width: 100%;с overflow: hidden;хитрым решением, если кто не знал об этом.

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[править] Также проверьте пример для трехколоночной разметки: http://jsfiddle.net/MHeqG/3148/


1
Идеальное решение для гибкой навигационной панели с фиксированным логотипом.
Ствол

5

Если вы пытаетесь заполнить оставшееся пространство во flexbox между двумя элементами, добавьте следующий класс в пустой div между двумя, которые вы хотите разделить:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

4

использование display:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>

1
Этот ответ дублирует ответ Джордана от 2014 года.
TylerH

3

Кажется, ответ Баушли - лучший способ устроить это, используя поплавки. Однако не без его проблем. Вложенные плавающие элементы в расширенном элементе не будут вам доступны; это сломает страницу.

Показанный метод в основном «подделывает», когда дело доходит до расширяющегося элемента - он на самом деле не плавающий, он просто играет с плавающими элементами фиксированной ширины, используя свои поля.

Тогда проблема именно в том, что расширяющийся элемент не является плавающим. Если вы попытаетесь использовать вложенные плавающие элементы в раскрывающемся элементе, эти «вложенные» плавающие элементы на самом деле вообще не будут вложенными; когда вы попытаетесь засунуть clear: both;под свои «вложенные» всплывающие элементы, вы в конечном итоге также очистите поплавки верхнего уровня.

Затем, чтобы использовать решение Boushley, я хотел бы добавить, что вы должны разместить div, такой как: .fakeFloat {height: 100%; ширина: 100%; плыть налево; } и поместите это прямо в расширенный div; все содержимое расширенного div должно идти внутри этого элемента fakeFloat.

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


Не используйте таблицы для разметки. Вы не можете установить их высоту. Они расширяются, чтобы удерживать свой контент, и они не соблюдают переполнение.
КБРО

@kbro: не используйте таблицы для разметки, потому что содержимое и отображение должны храниться отдельно. Но если контент структурирован как таблица, его, безусловно, можно вырезать overflow: hidden. jsfiddle.net/dave2/a5jbpc85
Дейв

3

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

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>

3

У меня была похожая проблема, и я нашел решение здесь: https://stackoverflow.com/a/16909141/3934886

Решение для колонок с фиксированным центром и жидкостной стороны.

.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

Если вы хотите фиксированный левый столбец, просто измените формулу соответственно.


Недоступно в некоторых старых браузерах, таких как IE8, и только частично в IE9 ( caniuse.com/#feat=calc )
landi

2

Вы можете использовать свойства Grid CSS, это наиболее понятный, чистый и интуитивно понятный способ структурирования ваших блоков.

#container{
    display: grid;
    grid-template-columns: 100px auto;
    color:white;
}
#fixed{
  background: red;
  grid-column: 1;
}
#remaining{
  background: green;
  grid-column: 2;
}
<div id="container">
  <div id="fixed">Fixed</div>
  <div id="remaining">Remaining</div>
</div>


1

Интересно, что никто не использовал position: absoluteсposition: relative

Итак, другое решение будет:

HTML

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

Пример Jsfiddle


0

/ * * css * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/ * * html * /

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>

0

У меня есть очень простое решение для этого! // HTML

<div>
<div id="left">
    left
</div>
<div id="right">
    right
</div>

// CSS

#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}

Ссылка: http://jsfiddle.net/MHeqG/


0

У меня была похожая проблема, и я нашел следующую, которая работала хорошо

CSS:

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML:

<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>

Этот метод не переносится, когда окно сокращается, но автоматически расширяет область содержимого. Он сохранит статическую ширину для меню сайта (слева).

А для автоматического расширения поля содержимого и демонстрации левой вертикальной рамки (меню сайта):

https://jsfiddle.net/tidan/332a6qte/


0

Попробуйте добавить позицию relative, удалить widthи floatсвойства с правой стороны, затем добавить leftи rightсвойство со 0значением.

Кроме того, вы можете добавить margin leftправило со значением, основанным на ширине левого элемента (+ несколько пикселей, если вам нужно пространство между ними) чтобы сохранить его положение.

Этот пример работает для меня:

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }

0

.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}
<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

Попробуй это. Это сработало для меня.


0

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

Вот код

// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
    fixRightSideWidth();
    $('.right_content_container').show(600);
}, 50);

// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
    fixRightSideWidth();
});

function fixRightSideWidth(){
    $blockWrap = 300; // Point at which you allow the right div to drop below the top div
    $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
    if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
        $('.right_content_container').width( $normalRightResize );
        $('.right_content_container').css("padding-left","0px");
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    
    }
    else{
        if( $('.right_content_container').width() > 300 ){
            $('.right_content_container').width(300);
        }
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    }
    if( $thePageRefreshed == true ){
        $thePageRefreshed = false;
    }
}
/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
    min-width: 310px;
    background: #333;
    min-height:100vh;
}

body{
	background: #333;
	background-color: #333;
	color: white;
    min-height:100vh;
}

.top_title{
  background-color: blue;
  text-align: center;
}

.bottom_content{
	border: 0px;
	height: 100%;
}

.left_right_container * {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #333 !important;
    background-color: #333 !important;
    display:inline-block;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 0;
    box-sizing: content-box;
    transition: none;
}

.left_navigator_item{
	display:inline-block;
	margin-right: 5px;
	margin-bottom: 0px !important;
	width: 100%;
	min-height: 20px !important;
	text-align:center !important;
	margin: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}

.left_navigator_items {
    float: left;
    width: 150px;
}

.right_content_container{
    float: right;
    overflow: visible!important;
    width:95%; /* width don't matter jqoery overwrites on refresh */
    display:none;
    right:0px;
}

.span_text{
	background: #eee !important;
	background-color: #eee !important;
	color: black !important;
	padding: 5px;
	margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
    <div class="left_right_container">
        <div class="left_navigator_items">
            <div class="left_navigator_item">Dashboard</div>
            <div class="left_navigator_item">Calendar</div>
            <div class="left_navigator_item">Calendar Validator</div>
            <div class="left_navigator_item">Bulletin Board Slide Editor</div>
            <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
            <div class="left_navigator_item">TV Guide</div>
        </div>
        <div class="right_content_container">
            <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.

Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.

Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.

Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.

In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
        </div>
    </div>
</div>

Вот моя скрипка, которая может работать для вас так же, как и для меня. https://jsfiddle.net/Larry_Robertson/62LLjapm/


0

Правила для предметов и контейнеров;

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

Используйте пробел: nowrap; для текстов в последних пунктах для их неструктурирования.

Элемент X% | Элемент Y% | Элемент Z%

Общая длина всегда = 100%!

если

Item X=50%
Item Y=10%
Item z=20%

тогда

Элемент X = 70%

Элемент X является доминирующим (первые элементы доминируют в макете таблицы CSS)!

Попробуйте max-content; свойство для div внутри для распространения div в контейнере:

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}


0

Самое простое решение - использовать маржу. Это также будет отзывчивым!

<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>

0

Самое простое решение - просто сделать ширину левого div равной 100% - ширину правого div плюс любой отступ между ними.

<div class="cont">
  <div class="search">
    Big Logo Text
  </div>
  <nav>
    <ul class="navbar">
      <li><a href="#1">NavLink1</a></li>
      <li><a href="#2">NavLink2</a></li>
      <li><a href="#3">NavLink3</a></li>
      <li><a href="#4">NavLink4</a></li>
      <li><a href="#5">NavLink5</a></li>
    </ul>
  </nav>
</div>

.cont{
  display: inline-grid;
  grid-template-columns: 160px 10px calc(100% - 170px);
  grid-template-rows: auto;
  grid-template-areas: "search .  navigation";
  width: 100%;
  height: auto;
  text-align: center;
}

.search {
  grid-area: search;
  height: 90px;
  background-color: #00FF00;
  line-height: 80px;
  font-size: 1.4rem;
  font-weight: 600;
}
nav {
  grid-area: navigation;
  height: 90px;
  background-color: #A53030;
}

.navbar{
  display: flex;
  height: 30px;
  width: 100%;
  padding: 0%;
  list-style-type: none;
  flex-flow: row wrap;
  flex: 0 1 auto;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
}

.navbar a{
    outline: 0;
    text-decoration: none;
}

https://codepen.io/tamjk/pen/dybqKBN


-2

Я столкнулся с этой же проблемой, пытаясь расположить некоторые элементы управления jqueryUI . Хотя общая философия сейчас "использовать DIVвместоTABLE », я обнаружил, что в моем случае использование TABLE работает намного лучше. В частности, если вам нужно прямое выравнивание внутри двух элементов (например, вертикальное центрирование, горизонтальное центрирование и т. Д.), Опции, доступные в TABLE, предоставляют простые, интуитивно понятные элементы управления для этого.

Вот мое решение:

<html>
<head>
  <title>Sample solution for fixed left, variable right layout</title>
  <style type="text/css">
    #controls {
      width: 100%;
    }
    #RightSide {
      background-color:green;
    }
  </style>
</head>

<body>
<div id="controls">
  <table border="0" cellspacing="2" cellpadding="0">
    <TR>
      <TD>
        <button>
FixedWidth
        </button>
      </TD>
      <TD width="99%" ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>

9
Вы никогда не должны использовать таблицы для форматирования чего-либо, кроме табличных данных. КОГДА-ЛИБО.
mmmeff

1
Проблема с таблицами состоит в том, что разметка будет вводить в заблуждение, если то, что вы пытаетесь отобразить, не предназначено для табличных данных. Если вы решили пренебречь принцип разметки , несущее значение, вы можете также получить обратно <font>, <b>и т.д. HTML усовершенствованного прошлого меньше фокусироваться на презентации.
Вилинкамени

4
Не знаю, почему все волнуются по поводу столов. Иногда они полезны.
Джандиг

Вы не можете исправить высоту стола. Если содержание становится больше, то и таблица увеличивается. И это не честь overflow.
kbro

@Jandieg: см. Ответ Михая Френтиу для объяснения. Цель CSS - отделить контент от внешнего вида. Использование свойств, таких как display:tableдостижение желаемого внешнего вида не табличных данных, является чистым. Принуждение не табличных данных, таких как столбцы страниц или элементы управления формы, в таблицы HTML для управления макетом является нечистым.
Дейв
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.