Как расположить два div по горизонтали внутри другого div - PullRequest
Новая
       28

Как расположить два div по горизонтали внутри другого div

56 голосов
/ 27 ноября 2008

Я давно не играл с CSS и сейчас у меня нет ссылок. Мой вопрос должен быть довольно простым, но поиск в Google не дает достаточного ответа. Итак, добавляя в коллективные знания ... 

|#header---------------------------------------------------------------|
|                               TITLE                                  |
|#sub-title------------------------------------------------------------|
|bread > crumb                    |                  username logout   |
|#sub-left                        |                          #sub-right|
|---------------------------------|------------------------------------|

Это то, что я хочу, чтобы мой макет был. Живите в любом случае. Я хотел, чтобы субтитр содержал сублево И субправо. Какие правила CSS я использую, чтобы гарантировать, что div связан с атрибутами другого div. В этом случае, как я могу убедиться, что под-левый и под-правый остаются в пределах подзаголовка?

Ответы [ 13 ]

65 голосов
/ 27 ноября 2008

Это довольно распространенное заблуждение, что вам нужен элемент clear:both внизу, когда вы на самом деле этого не делаете. Хотя ответ foxy верен, вам не нужен этот несемантический, бесполезный очистительный div. Все, что вам нужно сделать, это наклеить overflow:hidden на контейнер: 

#sub-title { overflow:hidden; }
36 голосов
/ 27 ноября 2008

Когда вы плаваете 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;
}
9 голосов
/ 29 ноября 2008

Я согласен с Darko Z в применении «переполнения: скрытый» к подзаголовку #. Тем не менее, следует отметить, что метод очистки с плавающей точкой overflow: hidden не работает с IE6, если у вас нет указанной ширины или высоты. Или, если вы не хотите указывать ширину или высоту, вы можете использовать «zoom: 1»: 

#sub-title { overflow:hidden; zoom: 1; }
9 голосов
/ 27 ноября 2008

Это должно сделать то, что вы ищете: 

<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>

И вы можете контролировать весь документ с помощью класса-обертки или только два столбца с помощью подосновного класса.

5 голосов
/ 27 ноября 2008

Этот ответ добавляет вышеприведенные решения для решения вашего последнего предложения, которое гласит:

как мне убедиться, что суб-левый и суб-правый остаются в пределах субтитра

Проблема заключается в том, что по мере расширения суб-левого или суб-правого контекста они будут расширяться ниже субтитра. Такое поведение встроено в 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: вы правы, лучшее описание решения для переполнения: авто (или переполнение: скрытое), которое я нашел, было в публикации на SitePoint некоторое время назад Простая очистка FLoats и есть также хорошее описание в 456beastastreet статье CSS Tips and Tricks Part-2 . Нужно признать, что я слишком ленив, чтобы самостоятельно реализовать эти решения, так как закрывающий div-кластер работает нормально, хотя, конечно, он очень неэлегатный. Так что теперь буду прилагать усилия, чтобы привести в порядок мой поступок.

3 голосов
/ 27 ноября 2008

Серьезно попробуйте некоторые из них, вы можете выбрать фиксированную ширину или более гибкие макеты, выбор за вами! Реально легко реализовать.

Макеты IronMyers

больше больше больше

0 голосов
/ 11 февраля 2015

Через Bootstrap Grid , вы можете легко получить кросс-браузерное совместимое решение. 

<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/

0 голосов
/ 26 февраля 2014 
#sub-left, #sub-right
{
    display: inline-block;
}
0 голосов
/ 01 сентября 2012

Лучший и простой подход с css3 

#subtitle{
/*for webkit browsers*/
     display:-webkit-box;
    -webkit-box-align:center;
    -webkit-box-pack: center;
     width:100%;
}

#subleft,#subright{
     width:50%;
}
0 голосов
/ 02 мая 2011

Вместо использования overflow:hidden, что является своего рода хаком, почему бы просто не установить фиксированную высоту, например height:500px, в родительское подразделение?

Страница:
...