CSS два отделения друг рядом с другом
7 ответов
Можно использовать flexbox для разметки объектов:
#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
/* Just so it's visible */
}
#wide {
flex: 1;
/* Grow to rest of container */
background: lightgreen;
/* Just so it's visible */
}<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>Это в основном просто очищает поверхность flexbox. Flexbox может сделать довольно удивительные вещи.
<час>Для более старой поддержки браузера, можно использовать плавание CSS и ширина свойства для решения его.
#narrow {
float: right;
width: 200px;
background: lightblue;
}
#wide {
float: left;
width: calc(100% - 200px);
background: lightgreen;
}<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>К сожалению, это не тривиальная вещь решить для общего случая. Самая легкая вещь состояла бы в том, чтобы добавить свойство стиля CSS "плавание: право"; Вашему отделению на 200 пкс, однако, это также вызвало бы Ваше "основное" - отделение, чтобы на самом деле быть полной шириной и любым текстом там будет плавать вокруг края 200px-отделения, которое часто выглядит странным, в зависимости от содержания (в значительной степени во всех случаях кроме того, если это - плавающее изображение).
РЕДАКТИРОВАНИЕ: , Как предложено Dom, переносящаяся проблема могла, конечно, быть решена с полем. Глупый я.
Метод, предложенный @roe и работой @MohitNanda, но если правильное отделение установлено как float:right;, то это должно быть на первом месте в источнике HTML. Это повреждается слева направо порядок чтения, который мог сбивать с толку, если страница отображена с выключенными стилями. Если это так, могло бы быть лучше использовать отделение обертки и абсолютное расположение:
<div id="wrap" style="position:relative;">
<div id="left" style="margin-right:201px;border:1px solid red;">left</div>
<div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>
Продемонстрированный:
оставленный правоРедактирование: Хм, интересный. Окно предварительного просмотра показывает правильно форматированные отделения, но представленный объект сообщения не делает. Извините тогда необходимо будет попробовать его за себя.
Как все указали, Вы сделаете это установкой a float:right; на содержании RHS и отрицательным полем на LHS.
Однако.. если Вы не будете использовать float: left; на LHS (как Mohit делает), тогда, то Вы получите ступающий эффект, потому что отделение LHS все еще собирается занимать margin'd место в расположении.
Однако.. плавание LHS упакует содержание в термоусадочную пленку, таким образом, необходимо будет вставить определенную ширину childnode, если это не будет приемлемо, в которой точке Вы, возможно, также определили ширину на родителе.
Однако.. поскольку David указывает, что можно изменить порядок чтения разметки избежать плавающего требования LHS, но это, имеет удобочитаемость и возможно проблемы доступности.
Однако.. эта проблема может быть , решил с плаваниями, учитывая некоторую дополнительную разметку
(протест: Я не одобряю .clearing отделение в том примере, вижу здесь для деталей)
, Учитывая все обстоятельства, я думаю, что большинству из нас жаль, что не было нежадного width:remaining в CSS3...
Для перефразирования одного из моих веб-сайтов, который делает что-то подобное:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style TYPE="text/css"><!--
.section {
_float: right;
margin-right: 210px;
_margin-right: 10px;
_width: expression( (document.body.clientWidth - 250) + "px");
}
.navbar {
margin: 10px 0;
float: right;
width: 200px;
padding: 9pt 0;
}
--></style>
</head>
<body>
<div class="navbar">
This will take up the right hand side
</div>
<div class="section">
This will fill go to the left of the "navbar" div
</div>
</body>
</html>
div1 {
float: right;
}
div2 {
float: left;
}
Это будет работать нормально, если вы установите clear: both для элемента, который разделяет этот блок с двумя столбцами.
Я не знаю, является ли это все еще актуальной проблемой или нет, но я только что столкнулся с той же проблемой и использовал отображение CSS : встроенный блок; тег .
Оберните их в div, чтобы их можно было расположить соответствующим образом.
<div>
<div style="display: inline-block;">Content1</div>
<div style="display: inline-block;">Content2</div>
</div>
Обратите внимание, что использование встроенного атрибута стиля использовалось только для краткости этого примера, конечно, они использовались для перемещения во внешний файл CSS.