Фиксированная ширина css и ширина переменной на одной строке

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

Ответы

Ответ 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; border: 0 none; }
#left { margin-right: 300px; background: yellow; }
#right { width: 300px; float: right; background: #ccc; }
</style>
</head>
<body>
<div id="wrapper">
<div id="right">Fixed</div>
<div id="left">Variable</div>
</div>
</body>
</html>

Это имеет правый столбец размером 300 пикселей и переменный левый столбец. DOCTYPE находится там, чтобы сделать IE хуже. Также рекомендуется использовать reset CSS.

Ответ 3

HTML

<div class="wrapper">
  <div class="fixed">fixed</div>
  <div class="variable">variable</div>
</div>

CSS

.wrapper {
    display: flex;
    align-items: stretch;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.fixed {
    min-width: 200px;
    width: 200px;
}
.variable {
    width: 100%;
}

Поддержка браузера здесь.

Ответ 4

Поплавки с явной шириной являются в значительной степени стандартным способом достижения этого в наши дни (из-за того, как ограниченный макет в CSS1/CSS2), вы также можете использовать встроенный блок, но это просто закончится тем, что будет больше работать. Не забывайте содержать поплавки родителя с переполнением: hidden и свойство, которое запускает hasLayout как ширина.

Ответ 5

Я предполагаю, что здесь вам нужен макет страницы с двумя столбцами. Теоретически вы можете использовать display: table, но если вам нужна поддержка любой версии IE, это не вариант.

Это одна из самых трудных вещей, которые некоторые из нас столкнулись при переключении с таблиц на CSS, но, к счастью для вас, мы занимаемся этим уже более 5 лет, и я думаю, что вы можете оценить решение любой проблемы. Возможно, вы хотите проверить эту классическую статью: Колонки Faux

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