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

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

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

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

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

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

Ответы [ 13 ]

0 голосов
/ 26 ноября 2010

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

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

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

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

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

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

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

<!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>
Страница:
...