Question

我认为这是因为我将所有三个div“列”浮动到主体div内部的左侧。

如何告诉主体div扩展到适合内容div所需的大小？

这是最小高度： alt text

这里拿走了最小高度： alt text

这是我的相关代码。

#body
{
    border:1px solid blue;
    width:950px;
    margin-left:auto;
    margin-right:auto;  
    margin-top:15px;
}

#leftcolumn
{
    min-height:500px;
    float:left;
    width:190px;
}

#contactarea
{
    font-family:Arial;
}

#contactarea p.heading
{
    Color:#000;
    font-size:large;
    position:relative;
    left:14px;
}

#contactarea p.tag
{
    color:#000;
    font-size:medium;
    position:relative;
    left:10px;
}

#leftnavigation ul
{
    margin:0;
    padding: 0;
    list-style: none;
}
#leftnavigation ul li {
    border-top: 1px solid #333;
    border-bottom: 1px solid #111;
}
#leftnavigation ul li:first-child {border-top: none;}
#leftnavigation ul li:last-child {border-bottom: none;}
#leftnavigation ul li a 
{
    padding: 10px;
    display: block;
    color: #fff;
    background-color:#222222;
    text-decoration: none;
}
#leftnavigation ul li a:hover {background: #111;}

#contentarea
{
    border:1px solid blue;
    min-height:500px;
    float:left;
    width:594px;
    margin-left:5px;
    margin-right:5px;
}

#advertisingarea
{
    width:150px;
    float:left;
    min-height:500px;
    background-image:url('images/advertisingAreaBackground.png');
    background-repeat:repeat-y;
}

.advert
{
    height:190px;
    overflow:hidden;    
}

.advert img
{
    padding:0;
    margin:0;
    position:relative;
    left:25px;
    top:5px;
}

.advert p
{
    font-size:x-small;
    font-family:Arial;
    margin-left:8px;
    margin-right:8px;
    margin-top:5px;
}

<div id="body">
    <div id="leftcolumn">
        <div id="leftnavigation">            
            <ul>
                <li><a href="#">Automoviles</a></li>
                <li><a href="#">Clases y Talleres</a></li>
                <li><a href="#">Electronicos</a></li>
                <li><a href="#">Inmobiliaria</a></li>
                <li><a href="#">Libros</a></li>
                <li><a href="#">Musica, Peliculas y Juegos</a></li>
                <li><a href="#">Ninos</a></li>
                <li><a href="#">Otros</a></li>
                <li><a href="#">Ropa</a></li>
            </ul>
        </div>
        <div id="contactarea">
            <p class="heading">Anuncios Premium</p>
            <p class="tag">Destaque sus anuncios con una cuenta premium!</p>
        </div>
    </div>
    <div id="contentarea">sdfg<h1>asdasd</h1></div>
    <div id="advertisingarea">
        <div class="advert">
            <a href="#"><img src="../../Content/images/advertImage.png" alt="Advert" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p>
        </div>

        <div class="advert">
            <a href="#"><img src="../../Content/images/advertImage.png" alt="Advert" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p>
        </div>

        <div class="advert">
            <a href="#"><img src="../../Content/images/advertImage.png" alt="Advert" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p>
        </div>
    </div>
</div>

Answer 1

最简单的方法就是set the oveflow of the container：

#body
{
    ...
    overflow: auto;
}

Answer 2

对于一个div来“包裹”它所包含的元素，如果你已经浮动了其他元素，你必须浮动它（float：left）。

要使浮动div居中，最好的跨浏览器解决方案是将其包装在另一个未浮动的div（不可见）上并将该div居中。像这样：

<div id="centered">
   <div id="floated">
   </div>
</div>

这样你可以让内部div包装它包含的元素而不指定任何hieght值，而外部div（不可见，只有宽度）使它保持居中;）

Answer 3

你应该使用firebug来解决这样的css问题。你会感到惊讶它是多么有用。

回答你的问题 - 由于浮动元素，它没有高度。您需要清除该元素中的浮动，以便父项按预期显示。你可以通过几种方式实现这一目标。

制作一个明确的类，然后在浮点数后将其添加为元素：

<style>
.clear{clear:both;}
</style>
<div class="parent">
    <div class="float_left">left</div>
    <div class="float_right">right</div>
    <div class="clear"></div>
</div>

对于任何具有“容器”类的元素，

更合适的自动清除：

<style>
.container:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}

.container {
 display: inline-block;
}

html[xmlns] .container {
 display: block;
}

* html .container {
 height: 1%;
}
</style>
<div class="parent container">
    <div class="float_left">left</div>
    <div class="float_right">right</div>
</div>

除非我给它最小高度，否则Div没有高度

3 个答案: