Как сделать div, чтобы обернуть два плавающих div внутри? - PullRequest
Новая
       18

Как сделать div, чтобы обернуть два плавающих div внутри?

72 голосов
/ 04 декабря 2009

Я не знаю, является ли это общей проблемой, но я пока не могу найти решение в сети. Я бы хотел, чтобы два div-элемента были обернуты внутри другого div-элемента, однако эти два div-элемента внутри должны быть выровнены на одном уровне (например: левый занимает 20% ширины wrappedDiv, правый - еще 80%) Для достижения этой цели я использовал следующий пример CSS. Тем не менее, теперь упаковка DIV не обернула все эти элементы. Оберточный элемент Div имеет небольшую высоту, чем эти два элемента Div, содержащиеся внутри. Как я могу убедиться, что div-обтекатель имеет наибольшую высоту, как у div-элементов? Спасибо !!! 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>liquid test</title>
    <style type="text/css" media="screen">
        body
        {
            margin: 0;
            padding: 0;
            height:100%;
        }
        #nav
        {
            float: left;
            width: 25%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }

        #content
        {
            float: left;
            margin-left: 1%;
            width: 65%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }       
        #wrap
        {
          background-color:#DDD;
          height:100%;
        }

</style>
</head>
<body>
<div id="wrap">
    <h1>wrap1 </h1>
    <div id="nav"></div>
    <div id="content"><a href="index.htm">&lt; Back to article</a></div>
</div>
</body>
</html>

Ответы [ 11 ]

1 голос
/ 04 декабря 2009 
<html>
<head>
    <style>
        #main { border: 1px #000 solid; width: 600px; height: 400px; margin: auto;}
        #one { width: 20%; height: 100%; background-color: blue; display: inline-block; }
        #two { width: 80%; height: 100%; background-color: red; display: inline-block; }
    </style>
</head>
<body>
<div id="main">
    <span id="one">one</span><span id="two">two</span>
</div>
</body>
</html>

Секрет в inline-block. Если вы используете границы или поля, вам может потребоваться уменьшить ширину элемента div, в котором они используются.

ПРИМЕЧАНИЕ. Это не работает должным образом в IE6 / 7, если вы используете «DIV» вместо «SPAN». (см. http://www.quirksmode.org/css/display.html)

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