Html Div没有像应该的那样伸展_Html_Css

Html Div没有像应该的那样伸展

html css

Html Div没有像应该的那样伸展,html,css,Html,Css,我在我正在建设的网站上看到了这种分层的风格以前是这样的, <body> <div id="mainContainer" style="width:70%" class="Center Pane0 PaneWrapper"> <div class="Pane1"> blah blah </div> <div class="Pane1">

我在我正在建设的网站上看到了这种分层的风格

以前是这样的,

<body>
    <div id="mainContainer" style="width:70%" class="Center Pane0 PaneWrapper">
        <div class="Pane1">
            blah blah
        </div>

        <div class="Pane1">
            blah blah
        </div>
    </div>
</body>

<body>
    <div id="mainContainer" style="width:70%" class="Center Pane0 PaneWrapper">
        <div style="width:80%;float:left">
            <div class="Pane1">
                blah blah
            </div>

            <div class="Pane1">
                blah blah
            </div>
        </div>

        <div style="width:19%;float:left">
            <div class="Pane1">
                imaginary sidepanel
            </div>
        </div>
    </div>
</body>


废话
废话

一切都很好，mainContainer将其高度扩展到内部内容所需的最小值。然后，我决定添加一个边栏，如下所示：

<body>
    <div id="mainContainer" style="width:70%" class="Center Pane0 PaneWrapper">
        <div class="Pane1">
            blah blah
        </div>

        <div class="Pane1">
            blah blah
        </div>
    </div>
</body>

<body>
    <div id="mainContainer" style="width:70%" class="Center Pane0 PaneWrapper">
        <div style="width:80%;float:left">
            <div class="Pane1">
                blah blah
            </div>

            <div class="Pane1">
                blah blah
            </div>
        </div>

        <div style="width:19%;float:left">
            <div class="Pane1">
                imaginary sidepanel
            </div>
        </div>
    </div>
</body>


废话
废话
假想侧面板

突然，主容器的高度似乎为0（其唯一高度来自影响它的边距/填充值）。这是正常的行为吗？不知怎的，我对它的记忆有所不同

.Pane0和.Pane1只是视觉样式，不会以任何方式影响定位，.PaneWrapper当前只添加填充：10px和.Center不添加左边距：auto；右边距：自动

这是怎么回事？

你只需要清除你的浮动。一个很好的方法是使用

溢出：自动用于#主容器

或应用此类：
.clearfix:before,
.clearfix:after{
  content:' ';
  display:table;
}
.clearfix:after{
  clear:both;
}




如果将div
元素的样式从float:left
更改为display:inline块防止父元素折叠
<body>
  <div id="mainContainer" style="width:70%" class="Center Pane0 PaneWrapper">
    <div style="width:80%; display:inline-block;">
        <div class="Pane1">
            blah blah
        </div>

        <div class="Pane1">
            blah blah
        </div>
    </div>

    <div style="width:19%; display:inline-block;">
        <div class="Pane1">
            imaginary sidepanel
        </div>
    </div>
</div>


废话
废话
假想侧面板


你能发布你的css吗，具体我想class=“Center Pane0 PaneWrapper”>我把maincontiner
涂成了红色。这是你期望得到的吗@Afsa是的，在我将float:left替换为display:inline block之后，它现在显示正确了，谢谢。在jsfiddle中添加代码以了解您想要什么？@Singh他添加了float，并说主容器高度似乎为0
不需要jsfiddle。