Как разместить два div по горизонтали внутри другого div
Я слишком долго не играл с CSS и на данный момент у меня нет ссылок. Мой вопрос должен быть довольно простым, но поиск в Google не дает достаточного ответа. Итак, добавляя к коллективным знаниям ...
|#header---------------------------------------------------------------|
| TITLE |
|#sub-title------------------------------------------------------------|
|bread > crumb | username logout |
|#sub-left | #sub-right|
|---------------------------------|------------------------------------|
Вот каким я хочу, чтобы мой макет был. Живите в любом случае. Я хотел, чтобы подзаголовок содержал под-левый и под-правый. Какие правила css я использую, чтобы гарантировать, что div привязан к атрибутам другого div. В этом случае, как мне убедиться, что левый и правый нижний левый и нижний правый сегменты остаются в пределах подзаголовка?
Ответы 13
Возможно, что-то вроде этого ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#container
{
width:600px;
}
#head, #sub-title
{
width:100%;
}
#sub-left, #sub-right
{
width:50%;
float:left;
}
</style>
</head>
<body>
<div id = "container">
<div id = "head">
#head
</div>
<div id = "sub-title">
#sub-title
<div id = "sub-left">
#sub-left
</div>
<div id = "sub-right">
#sub-right
</div>
</div>
</div>
</body>
</html>
Это должно сделать то, что вы ищете:
<html>
<head>
<style type = "text/css">
#header {
text-align: center;
}
#wrapper {
margin:0 auto;
width:600px;
}
#submain {
margin:0 auto;
width:600px;
}
#sub-left {
float:left;
width:300px;
}
#sub-right {
float:right;
width:240px;
text-align: right;
}
</style>
</head>
<body>
<div id = "wrapper">
<div id = "header"><h1>Head</h1></div>
<div id = "sub-main">
<div id = "sub-left">
Right
</div>
<div id = "sub-right">
Left
</div>
</div>
</div>
</body>
</html>
И вы можете управлять всем документом с помощью класса-оболочки или только двумя столбцами с подглавным классом.
Вы также можете добиться этого с помощью структуры CSS Grids, такой как YUI Grids или Blue Print CSS. Они решают множество проблем с кроссбраузерностью и позволяют простым смертным использовать более сложные макеты столбцов.
Когда вы размещаете sub-left и sub-right, они больше не занимают места в sub-title. Вам нужно добавить еще один div с style = "clear: both" под ними, чтобы развернуть содержащий div, или они появятся под ним.
HTML:
<div id = "sub-title">
<div id = "sub-left">
sub-left
</div>
<div id = "sub-right">
sub-right
</div>
<div class = "clear-both"></div>
</div>
CSS:
#sub-left {
float: left;
}
#sub-right {
float: right;
}
.clear-both {
clear: both;
}
Этот ответ помог мне решить мою проблему, я добавил div внизу с четким CSS, и он сработал
Серьезно попробуйте некоторые из них, вы можете выбрать фиксированную ширину или более плавные макеты, выбор за вами! Действительно легко реализовать.
Макеты IronMyers
- Макеты CSS
- Руководство по настройке макетов
- Макеты CSS 750 пикселей
- Макеты CSS 950 пикселей
- 100 процентов макетов CSS
еще еще еще
Этот ответ дополняет приведенные выше решения, чтобы обратиться к вашему последнему предложению, которое гласит:
как сделать так, чтобы левый и правый нижний левый и нижний правый сегменты оставались в пределах подзаголовка
Проблема в том, что по мере расширения содержания под-левого или правого подзаголовка они будут расширяться под подзаголовком. Такое поведение разработано в CSS, но вызывает проблемы у большинства из нас. Самое простое решение - создать div, стилизованный под объявление CSS Clear.
Для этого включите оператор CSS для определения закрывающего div (может быть Clear Left или RIght, а не то и другое вместе, в зависимости от того, какие объявления Float были использованы:
#sub_close {clear:both;}
И HTML становится:
<div id = "sub-title">
<div id = "sub-left">Right</div>
<div id = "sub-right">Left</div>
<div id = "sub-close"></div>
</div>
Извините, только что понял, что это было опубликовано ранее, не стоило делать ту чашку кофе, когда набирал свой ответ!
@Darko Z: вы правы, лучшее описание решения overflow: auto (или overflow: hidden), которое я нашел, было в сообщении на SitePoint некоторое время назад Простая очистка плавсредств, а также есть хорошее описание в статье 456bereastreet Советы и хитрости CSS, часть 2. Должен признать, что мне было лень реализовывать эти решения самостоятельно, поскольку закрывающий блок div работает нормально, хотя, конечно, очень неэлегантен. Так что с этого момента я буду прилагать усилия, чтобы привести в порядок свой поступок.
Довольно распространенное заблуждение, что вам нужен блок clear:both внизу, хотя на самом деле он вам не нужен. Хотя ответ foxy правильный, вам не нужен этот бессемантический, бесполезный очищающий div. Все, что вам нужно сделать, это приклеить overflow:hidden к контейнеру:
#sub-title { overflow:hidden; }
Большое спасибо вам! Я помню, как преследовал эту проблему около 2 лет назад, и теперь я помню, как использовал overflow: hidden. Я попробую это сделать, как только вернусь к своему ноутбуку и сделаю правильный ответ.
Не проблема, дайте мне знать, как это получается
«Распространенное заблуждение» звучит немного грубо, так как очистка div - это рекомендуемый w3c метод, но это изящный трюк. Подробнее об этом см. quirksmode.org/css/clearing.html.
распространенное заблуждение состоит в том, что вы необходимость очищающий div, а не в том, что он неправильный, не работает или не рекомендуется. лично я думаю, что его не следует рекомендовать как бессмысленный (хотя я использовал его раньше, когда не было другого способа)
Я всегда ненавидел четкое исправление div ... меня радует то, что есть другое решение.
Я согласен с Darko Z в применении "overflow: hidden" к подзаголовку #. Однако следует отметить, что метод очистки overflow: hidden не работает с IE6, если у вас нет указанной ширины или высоты. Или, если вы не хотите указывать ширину или высоту, вы можете использовать «zoom: 1»:
#sub-title { overflow:hidden; zoom: 1; }
Вы делаете это так:
<table>
<tr>
<td colspan = "2">TITLE</td>
</tr>
<tr>
<td>subleft</td><td>subright</td>
</tr>
</table>
ЛЕГКО - я набрал его за 1 минуту. Помните, что файл CSS необходимо загрузить клиенту, поэтому не беспокойтесь о лишних тегах, в данном случае это несущественно.
Вместо того, чтобы использовать overflow:hidden, что является своего рода уловкой, почему бы просто не установить фиксированную высоту, например height:500px, в головное подразделение?
Лучший и простой подход с css3
#subtitle{
/*for webkit browsers*/
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack: center;
width:100%;
}
#subleft,#subright{
width:50%;
}
#sub-left, #sub-right
{
display: inline-block;
}
Через Сетка начальной загрузки вы можете легко получить кроссбраузерное решение.
<div class = "container">
<div class = "row">
<div class = "col-sm-6" style = "background-color:lavender;">
Div1
</div>
<div class = "col-sm-6" style = "background-color:lavenderblush;">
Div2
</div>
</div>
</div>
jsfiddle: http://jsfiddle.net/DTcHh/4197/
Это очень похоже на то, что я использую сейчас. Однако, скажем, я хотел, чтобы «контейнер» в вашем примере рисовал границу вокруг нижнего левого и нижнего правого блоков div, это не сработает.