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

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

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

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

Ответ 1

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

#sub-title { overflow:hidden; }

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

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

Проблема заключается в том, что по мере расширения содержимого суб-левого или подглавного расширений они будут распространяться ниже подзаголовка. Такое поведение разработано в 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: вы правы, лучшее описание для переполнения: автоматически (или переполнение: скрытое) решение, которое я нашел, было в aa post на SitePoint некоторое время назад "Простая очистка FLoats" , а также хорошее описание в статье 456bereastreet Советы и рекомендации CSS Часть 2. Приходится признаться, что слишком ленив, чтобы реализовать эти решения самостоятельно, так как закрытие div cludge работает нормально, хотя оно, конечно, очень неэлегантно. Так что теперь мы будем прилагать усилия, чтобы очистить мой поступок.

Ответ 6

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

Планы IronMyers

подробнее подробнее

Ответ 7

Вы также можете добиться этого, используя фреймворк CSS Grids, например сетки YUI или Blue Print CSS. Они решают много проблем с перекрестным браузером и делают более сложные макеты столбцов возможными для использования простых смертных.

Ответ 8

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

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

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

Ответ 9

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

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

Ответ 10

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

Ответ 11

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

Ответ 12

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

Ответ 13

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

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

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