Html 作为另一个DIV中的填充块的DIV_Html_Css

Html 作为另一个DIV中的填充块的DIV

html css

Html 作为另一个DIV中的填充块的DIV,html,css,Html,Css,我有一个CSS .nav { width: 200px; line-height: 50px; float: left; } .content { margin: 0px 0px 0px 230px; } .container { border: 1px solid red; } 这是HTML <body> <div class="container"> <div class="nav">Some text

我有一个CSS

.nav {
    width: 200px;
    line-height: 50px;
    float: left;
}
.content {
    margin: 0px 0px 0px 230px;
}
.container {
    border: 1px solid red;
}

这是HTML

<body>
<div class="container">
    <div class="nav">Some text
        <br>more text
        <br>even more text
    </div>
    <div class="content">
        <h1>Home</h1>
        <p>Text paragraph</p>
    </div>
</div>
</body>


一些文本

更多文本

更多文本
家
文本段落

这使我在左边的菜单和右边的内容。右侧的内容周围有一个红色框，但左侧只有半个菜单

但是我想把红色的盒子也放在整个导航舱的周围，有人能帮忙吗

谢谢

Teddy

将

溢出：自动

添加到容器div的CSS中：

.container {
    border: 1px solid red;
    overflow:auto;
}

浮动子div会将其从文档流中移除，容器实际上会折叠，就好像它不存在一样。添加溢出将恢复您所追求的行为。

我认为这是一个快速修复方法，如果您浮动容器，它将解决您的问题。看这里

imho最好的方法是添加一个div，如：

<div style="clear:both;"></div>

它不太兼容浏览器（旧的），但更干净

您必须在css中添加

溢出：自动

到

.container

检查我的

还有修改过的css

.container {
    border: 1px solid red;
    overflow:auto;
}

来自MDN的属性描述

overflow属性指定是否剪裁内容、渲染滚动条或仅在内容溢出其块级别时显示内容容器

浮动元素会将其从页面的正常流程中移除，其一个副作用是其父元素的维度不会扩展以适应它

因此，您需要做的是清除浮动项。要做到这一点，最好的方法是在不使用额外标记或

overflow

属性的情况下，根据您的布局，使用父元素上的

：after

伪类，如下所示：

.nav{
宽度：200px；
线高：50px；
浮动：左；
}
.内容{
保证金：0px 0px 0px 230px；
}
.集装箱{
边框：1px纯红；
}
.容器：：之后{
明确：两者皆有；
内容：“；
显示：块；
身高：0；
宽度：0；
}


Xalsdk fjaskldfj alskdfj asädf
asdf
asdf
家
等等

这与我7分钟前的回答有什么不同？@j08691我添加了关于

溢出

属性的描述。我没有抄袭你的答案，我没说你抄袭了我的答案。但是答案，

addoverflow:auto-to.container在你的css

中和我的一样。那么为什么我们需要一个副本呢？@j08691需要解释为什么我们使用

溢出

属性来解决这个问题。参考资料来自于有良好记录的Mozila开发者之家network@Gunaseelan您可以编辑他的答案，因为您的答案实际上没有任何价值。仅用于样式设置的空标记不是一个好主意，特别是当不需要插入新标记的解决方案存在时，这就是为什么我添加了伪元素以获得相同的效果。然而，我认为在html中添加div比使用overflow:hidden要好得多。不管怎样，这只是我的观点，当然很多人都会同意你的观点。我没有（在这种情况下）@Gunaseelan我只是格式化了他的代码。。。。它是由mods审查的，所以有什么问题？像这样的代码并不意味着很多，是吗？所以我把他的“Ziuguzu”改成了真话。。。

.content:after {
    content:'';
    display:block;
    clear: both;
}

.container {
    border: 1px solid red;
    overflow:auto;
}