Выравнивание блока фиксированного размера и реагирующего блока бок о бок?

77
5

Я хочу сделать таблицу с центрированием шириной 900 пикселей с одной строкой и двумя ячейками. Я хочу, чтобы правая ячейка всегда была шириной 200 пикселей, а левая ячейка должна заполнять остальные, но когда я делаю окно браузера меньше, правая ячейка прыгает вниз под левой ячейкой. (когда в обеих клетках есть проценты, он работает нормально, но правая ячейка/блок должна быть 200 пикселей)?

Мой HTML:

<table class="sitecontent">
<tr>
<td class="boxed"> contents </td>
<td class="infobar"> contents </td>
</tr>
</table>

Мой CSS:

.sitecontent {
max-width:900px;
margin: 0 auto;
display: table;
height: 100%;
}

.boxed {
max-width:75%;
float: left;
}

.infobar {
float: left;
width: 200px;
border: 1px solid rgb(240,240,240);
overflow: auto;
max-height: 100%;
}

Разве максимальная ширина не должна превышать ширину "коробочного" менее 75%, чтобы содержимое соответствовало ширине таблицы ниже 900 пикселей?

Я пытался использовать divs вместо таблицы, но результат тот же самый?

спросил(а) 2014-10-03T01:53:00+04:00 5 лет, 10 месяцев назад
1
Решение
54

Если вы хотите, чтобы другая ячейка заполнила остальную часть пространства, вы можете использовать функцию calc()

Это позволяет определять размеры с использованием базового сложения и вычитания с использованием процентов и фиксированных единиц.

calc() широко поддерживается http://caniuse.com/#feat=calc

Хорошей ссылкой является http://css-tricks.com/a-couple-of-use-cases-for-calc/

В следующем примере у меня есть

.boxed {
max-width:calc(100% - 200px);
}

http://jsfiddle.net/AuroraArcade/42g5mw80/2/

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

Один пример

.infobar {   
width: 200px;
box-sizing: border-box;
border: 1px solid rgb(240,240,240);
overflow: auto;
max-height: 100%;
}

ответил(а) 2014-10-03T01:58:00+04:00 5 лет, 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема