Ширина жидкости и фиксированная с колоннами с границами между

-1

У меня есть ширина левой колонны жидкости и фиксированная ширина правой колонки. Мне нужна граница между ними, которая является высотой самой высокой колонки.Ширина жидкости и фиксированная с колоннами с границами между

Вот упрощенная схема того, что у меня есть:

.left { 
    width: 100%; 
    float: left; 
} 
.left-inner { 
    margin-right: 275px; 
    padding-right: 30px; 
    border-right: 2px dotted #47718D; 
} 
.right { 
    float: left; 
    padding-left: 30px; 
    width: 275px; 
    margin-left: -275px; 
} 
<div class="left"> 
    <div class="left-inner"> 
     Content 
    </div> 
</div> 
<div class="right"> 
    Sidebar 
</div>

Вот более подробная скрипку: http://jsfiddle.net/meaLh

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

источник

2014-01-12 jaypeg

Не понимая, как вы ожидаете, что ваш макет будет, вы видели скрипку? –

попробуйте вместо этого использовать float для использования display: table/table-cell и right-border для first-child –

@ Mr.Alien Я перефразировал последний абзац – jaypeg

* { 
    box-sizing: border-box; 
} 
.wrapper { 
    width: 100%; 
    max-width: 1260px; 
} 
.left { 
    width: 100%; 
    float: left; 
} 
.left-inner { 
    margin-right: 275px; 
    padding-right: 30px; 
} 
.right { 
    float: left; 
    padding-left: 30px; 
    width: 275px; 
    margin-left: -275px; 
    border-left: 2px dotted #47718D; 
}

источник

2014-01-12 15:40:27 artdias90

Проблема в том, что иногда левый столбец будет длиннее правого столбца, а иногда наоборот, поскольку они содержат динамический контент. – jaypeg

Граница останавливается, когда содержание в левой колонке останавливается, поскольку атрибут границы был применен к левому column.Similarly границы прикладывается к правой колонке остановится где содержание правого stops.Now столбца, если вы хотите, чтобы граница была ниже содержимого, вы можете использовать некоторое дополнение в нижней части столбцов. Вы также можете использовать третий столбец между левым и правым столбцами с очень небольшой шириной и применить минимальную высоту и границу с ней.

источник

2014-01-12 16:03:57 user3186527

Эти столбцы имеют динамический контент, поэтому иногда левый длинный, а иногда правый - длиннее. Эти решения будут работать, только если я точно знаю точную высоту? – jaypeg

Ширина жидкости и фиксированная с колоннами с границами между

ответ

Смежные вопросы