it-swarm.com.ru

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

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

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

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

56
Josh Smeaton

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

#sub-title { overflow:hidden; }
65
Darko Z

Когда вы перемещаете 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
foxy

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

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

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

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

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

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

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

5
James Piggot

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

Макеты IronMyers

еще еще еще

3
inspite

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

0
csexton

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

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

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