html - 如何让2个元素坚持父母的大小？ - Thinbug

如何让2个元素坚持父母的大小？

时间：2011-07-08 21:15:42

标签： html css

基本上这并不是我想要的方式。导航按钮只是向右浮动而不是保留在其父div中。我的HTML是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>UI Test</title>
    <link type="text/css" rel="stylesheet" href="main.css" />
</head>

<body>
    <div id="container">
        <div id="header">
            <div class="first">
                First column stuff
            </div>

            <div class="second">
                <a href="#" class="nav_button">Current Projects</a>
                <a href="#" class="nav_button">Build New Project</a>
                <a href="#" class="nav_button">Fund Projects</a>
            </div>
        </div>
    </div>
</body>
</html>

我的main.css文件看起来有点像这样：

#header {
    display: block;
    background-color: #2a2626;
    color: #fff;
    border-bottom: 4px solid #000;
    border-top: 8px solid #000;
    padding-top: 8px;
}

.first {
    float: left;
    width: 20%;
}

.second {
    float: right;
}

.clear { clear: both; }

.nav_button {
    background-image: -webkit-gradient(
        linear,
        left bottom,
        right bottom,
        color-stop(0.14, rgb(44,132,145)),
        color-stop(0.79, rgb(103,191,204))
    );
    background-image: -moz-linear-gradient(
        left center,
        rgb(44,132,145) 14%,
        rgb(103,191,204) 79%
    );
    -moz-box-shadow: inset 0 0 8px rgba(255,255,255, 1);
    -webkit-box-shadow: inset 0 0 8px rgba(255,255,255, 1);

    color: white;
    font-family: Pare, Helvetica;
    font-size: 24pt;
    text-align: center;
    text-decoration: none;

    padding: 27px;
}

以下是它正在做的事情：http://i.imgur.com/PU400.png 正如你所看到的，高度不是自动调节的，而且我一直试着做一段时间。有谁知道问题是什么？

1 个答案:

答案 0 :(得分：0)

守旧派方法：在<div class="second">之后加上一个清算元素，例如<br style="clear: both" />，以强制父元素完全包围按钮。

较新的学校方法：将#header设为overflow: auto。