при центрировании отделения между одним, это пустило в ход право и один, это плавало оставленный
У меня есть страница, на которой заголовок состоит из трех отделений - один это пускается в ход налево, один это пускается в ход направо, и один это промежуточно их. Я хотел бы за то центральное отделение центрироваться, все же печально float: center не существует и я не могу только пустить в ход его налево и добавить дополнение, когда это должно было бы измениться в зависимости от размера окна.
Действительно ли там что-то просто, я пропускаю? Или как я сделал бы такую вещь?
Обновление:
Кроме того, я хотел бы найти способ центрировать то среднее отделение в пространстве между отделениями в случае, если это выглядит лучше.
3 ответа
Если у вас есть два плавающих div, то вы знаете поля. Проблема в том, что float:right div должен быть помещен перед средним div. Поэтому в основном у вас будет:
left-floated | right-floated | centered
Теперь о полях: обычно вы можете просто использовать margin:0 auto, верно? Проблема в том, что сейчас вы знаете значения полей: floated div! Поэтому вам просто нужно использовать:
margin:0 right-floated-width 0 left-floated-width
Это должно сработать.
Годы спустя редактировать
Тем временем в городе появилась новая игрушка: flexbox. Поддержка довольно хорошая (т.е. если вам не нужна поддержка ниже IE 10), а простота использования намного превосходит floats.
Вы можете посмотреть очень хорошее руководство по flexbox здесь. Пример, который вам нужен, находится здесь здесь.
Попробуйте это (убедитесь, что используете лучшие имена классов):
.left {
float:left;
width:200px;
}
.right{
float:right;
width:200px;
}
.center {
overflow:hidden;
zoom:1;
}
Центральный div поместится между двумя плавающими элементами.
Если вы хотите создать водосток между центральным div и двумя плавающими элементами, то используйте margin для плавающих элементов, а не для центрального div.
Из-за "масштабирования" CSS не будет проверяться, но этот макет будет работать в IE 5.5 и 6.
Обратите внимание, что здесь важен порядок следования источников: две плавающие вставки должны быть первыми, а затем ваш "центрированный" div.
Действительно, важная часть состоит в том, что центрированный div идет после левого и правого div в разметке. Посмотрите этот пример, он использует margin-left: auto и margin-right: auto для центрированного блока div, что приводит к его центрированию.
<html>
<head>
<style type="text/css">
#left
{
float: left;
border: solid 1px red;
}
#mid
{
margin-left: auto;
margin-right: auto;
border: solid 1px red;
}
#right
{
float: right;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="left">
left
</div>
<div id="right">
right
</div>
<div id="mid">
mid
</div>
</body>
</html>
Вот JS Bin для тестирования: http://jsbin.com/agewes/1/edit