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

386

У меня есть 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, и оно будет работать.
  • 0
    относящийся к stackoverflow.com/questions/4873832/…
Показать ещё 5 комментариев
Теги:
responsive
width
fill

25 ответов

61
Лучший ответ

Кажется, что вы делаете то, что собираетесь делать.

#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, хотя, чтобы это работало.
  • 0
    Я просто скопировал и вставил этот код со страницы, на которой я тестировал ... 100% работает.
Показать ещё 14 комментариев
258

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

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

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

Здесь демо в Stack Snippets & 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>

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

Поделиться
  • 0
    Когда вы закрываете тег div, содержимое после этого div должно отображаться в новой строке, но этого не происходит. Не могли бы вы объяснить, почему?
  • 0
    должно быть: margin-left: 190px; ты забыл ';'. Также поле слева должно быть 180px.
Показать ещё 7 комментариев
127

Решение исходит из свойства отображения.

В принципе, вам нужно сделать, чтобы оба div были похожи на ячейки таблицы. Поэтому вместо использования float:left вам нужно будет использовать display:table-cell для обоих div, а для динамической ширины div вам нужно также установить width:auto;. Оба div должны быть помещены в контейнер шириной 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 с width: auto больше, чем остальное пространство, доступное в области просмотра.
  • 0
    Как и в случае с предложением Дж. Петерсона, вы НЕ должны использовать таблицы в качестве дизайна, за исключением случаев, когда их содержимое фактически является данными таблицы. У этого предложения должно быть намного больше минусовых голосов.
Показать ещё 6 комментариев
101

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

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

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

Поделиться
  • 1
    Браузерная поддержка переполнения. IE4 !!! w3schools.com/cssref/pr_pos_overflow.asp
  • 1
    Иногда я получаю бесполезную горизонтальную полосу прокрутки на элементе .right. В чем проблема?
Показать ещё 6 комментариев
88

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

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

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

Поделиться
  • 0
    См. Www.w3schools.com/cssref/css3_pr_flex-grow.asp для хорошего объяснения атрибута CSS. Простое современное решение, но может не работать в старых браузерах.
  • 2
    Flexbox FTW ... Я попробовал все другие решения в этой теме, ничего не работает, я пробую это решение flexbox, оно работает сразу ... классический CSS (то есть до появления flexbox и CSS-сетки) совершенно не работает ... правило гибкости и сетки :-)
Показать ещё 1 комментарий
20

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

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

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}
Поделиться
  • 0
    IE 9 и выше поддерживают атрибут calc. Единственная проблема с этим решением - возможно, мы не знаем ширину левого столбца или она изменяется.
  • 0
    Что ж, это решение может быть ориентировано на гибкий случай и предполагает, что вы не знаете или вас не волнует ширина родительского контейнера. В вопросе @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 фактически занимает все доступное пространство у родителя, вы можете видеть это во всех браузерах при проверке элементов)
  • 1
    Кто-нибудь может объяснить, почему это работает точно? Я знаю, что где-то здесь видел хорошее объяснение, но, похоже, не могу его найти.
Показать ещё 2 комментария
12

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

<html>

<head>
    <title>This is My Page 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/

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

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

Используйте 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>
Поделиться
  • 0
    Этот ответ дублирует ответ Джордана от 2014 года.
3

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

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}
Поделиться
3

У меня была аналогичная проблема, и я нашел решение здесь: https://stackoverflow.com/questions/16908958/css-3-column-liquid-layout-with-fixed-center-column

Решение для фиксированных центральных div и столбцов с жидкостью.

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

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

Поделиться
  • 0
    Недоступно в некоторых старых браузерах, таких как IE8, и только частично в IE9 ( caniuse.com/#feat=calc )
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

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

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

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

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

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

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

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

Поделиться
0

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

Интересно, что никто не использовал 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 

.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

Попробуйте добавить позицию 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

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

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

У меня есть очень простое решение для этого! //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  */

#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

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

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

Поделиться
-2

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

Вот код

// 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="/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/

Поделиться
-2

new для css. Но я решил эту проблему, используя встроенный блок. проверьте это: http://learnlayout.com/inline-block.html

Поделиться
-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>
Поделиться
  • 8
    Вы никогда не должны использовать таблицы для форматирования чего-либо, кроме табличных данных. КОГДА-ЛИБО.
  • 1
    Проблема с таблицами состоит в том, что разметка будет вводить в заблуждение, если то, что вы пытаетесь отобразить, не предназначено для табличных данных. Если вы решите пренебречь принципом разметки, несущим значение, вы также можете вернуться к <font> , <b> и т. Д. HTML развился после этого, чтобы меньше концентрироваться на презентации.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню