1

私は最近、横に並べて高さを自動的にサイズ変更する必要があるいくつかのコンテンツを設計していますが、高さはサイズ変更されません。div は、その中のアイテムのサイズまで拡大しません。div をその中の要素のサイズに拡張できるようにする方法はありますか?

CSS

* {
    padding: 0px;
    margin: 0px;
}
body {
    font-family: 'Metrophobic', sans-serif;
    background-color: #c5c5c5;
    background-image: url('../images/noise.png');
}
#container {
    width:900px;
    background-color: #dbdbdb;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    box-shadow: 0px 0px 5px black;
}
.center_align {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
#header {
    height:80px;
    font-size: 60px;
    padding: 10px;
    text-align: center;
}
#menu {
    width:900px;
    height:50px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #cacaca;
}
.menu_link {
    width:224px;
    height:50px;
    text-align: center;
    font-size: 35px;
    float: left;
    opacity: 0.3;
    background-color: #cacaca;
}
.menu_divider {
    width: 1px;
    height: 50px;
    background-color: #dbdbdb;
    float:left;
}
#content {
    width: 900px;
    height: auto;
    padding: 10px;
    font-size: 20px;
    height: auto;
}
.line_container {
    margin-top:5px;
    margin-bottom:5px;
}
#footer {
    width:900px;
    height:22px;
    padding-top:2px;
    text-align: center;
    font-size: 14px;
    color:black;
}

a:link {
    color:black;
    text-decoration: none;
}
a:visited {
    color:black;
    text-decoration: none;
}
a:hover {
    color:black;
    text-decoration: none;
}
a:active {
    color:black;
    text-decoration: none;
}

a.link:link {
    color:#21525e;
}
a.link:visited {
    color:#21525e;
}
a.link:hover {
    color:#307f91;
    text-decoration: underline;
}
a.link:active {
    color:#307f91;
    text-decoration: underline;
}

HTML

<html>
<head>
<title>Home</title>
<link rel="shortcut icon" href="../images/favicon.ico" />
<link href="http://fonts.googleapis.com/css?family=Metrophobic" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.icon {
    width:100px;
    height:100px;
    border: 3px solid white;
    border-radius:25px;
    margin-left:10px;
    margin-right:10px;
    background-position: center center;
    background-size: 100px 100px;
}
</style>
</head>
<body>
<div id="container">
    <div id="header">
        <div class="center_align">
            <img src="../images/header_icon.png" alt="header_icon" width="80" height="80" style="margin-right:20px;float:left;" />
            <div style="height:80px;float:left;">Title</div>
        </div>
    </div>
    <div id="menu">
        <a href="../home" class="menu_link">Home</a>
        <div class="menu_divider"></div>
        <a href="../tutorials" class="menu_link">Tutorials</a>
        <div class="menu_divider"></div>
        <a href="../about" class="menu_link">About</a>
        <div class="menu_divider"></div>
        <a href="../contact" class="menu_link">Contact</a>
    </div>
    <div id="content">
        <div style="width:900px;">
            <div class="icon" style="background-image:url('image.jpg');float:left;"></div><div style="float:left;margin-top:20px;">I'm a freelance Web, Iphone, and Game developer.</div>
        </div>
    </div>
    <div id="footer">
        &copy;&nbsp;Cameron
    </div>
</div>
</body>
</html>
4

4 に答える 4

5

問題は、#footer要素が適切にクリアされていないことのようです。に追加clear: both;し#footerます。これにより、クリアされた要素がフロートされた要素の下にプッシュされ、機能的に同じ視覚的な修正が行われるはずです。

于 2012-07-27T18:03:48.647 に答える
3

「コンテナ div」は、基本的にそれがコンテナであることを「忘れる」ので、単純に を追加しoverflow:auto;て記憶させます。また、IEにはzoom:1を追加する傾向があります。

于 2012-07-27T18:19:13.313 に答える
2

問題は、浮動要素であるということです。これにより、デフォルトでdivをラップする際に問題が発生します（ほとんど...）。

これが実用的なソリューションでありoverflow:hidden、ラッピングdivに追加されます：http：//jsfiddle.net/s2dxw/2/

フロートの問題はかなり紛らわしく、過去にいくつかの解決策がありました。HTMLのfloatに関する良い読み物は次のとおりです：http：//css-tricks.com/all-about-floats/

于 2012-07-27T18:05:03.910 に答える
1

または、ルールを含む要素をclear: both;ラッピングの内側と最後に配置することもできますdiv。

于 2012-07-27T18:07:18.987 に答える