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

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

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

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

13 56
html css fluid-layout

13 ответов:

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

#sub-title { overflow:hidden; }
65

когда вы плаваете 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;
}
36

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

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

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

9

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

#sub-title { overflow:hidden; zoom: 1; }
9

этот ответ добавляет к решениям выше, чтобы обратиться к вашему последнему предложению, которое гласит:

как я могу гарантировать, что sub-left и sub-right остаются в подзаголовке

проблема в том, что по мере расширения содержимого суб-левого или суб-правого они будут расширяться ниже подзаголовка. Это поведение разработано в CSS, но вызывает проблемы для большинства из нас. Самое простое решение-иметь div, который стилизован с четким объявлением CSS.

для этого включите оператор CSS для определения закрывающего div (может быть ясно слева или справа, а не оба, в зависимости от того, какие объявления 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 a в то время как назад простая очистка поплавков и есть также хорошее описание в статье 456bereastreet CSS советы и рекомендации Часть-2. Должен признать, что слишком ленив, чтобы реализовать эти решения самостоятельно, так как закрывающий div cludge работает нормально, хотя это, конечно, очень неэлегантно. Так что с этого момента приложу все усилия, чтобы очистить свой поступок.

5

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

IronMyers Макетов

больше еще

3

вы также можете достичь этого с помощью CSS сетки рамки, такие как Юи сетей или синяя печать CSS. Они решают много кросс-браузерных проблем и делают более сложные макеты столбцов возможными для использования простыми смертными.

0

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

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

#subleft,#subright{
     width:50%;
}
0

что-то вроде этого возможно...

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

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

-1
#sub-left, #sub-right
{
    display: inline-block;
}
-1

через 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/

-1

вы делаете это так:

<table>
   <tr>
      <td colspan="2">TITLE</td>
   </tr>
   <tr>
      <td>subleft</td><td>subright</td>
   </tr>
</table>

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

-6