html - 如何获得具有自动高度和 float div 的容器 Div?

标签 html css-float css

我有以下 HTML

<style type="text/css">
<!--
.msg_ok{
    font-family: "Trebuchet MS";
    font-weight: bold;
    font-size: 16px;
    margin:0 auto;
    padding:10px;
    width:500px;
    height:auto;
    display:block;
}
.msg_ok{
    background-color:#DCFFB9;
    border:#003300 1px solid;
    color:#003500;
}
-->
</style>

      <div class="msg_ok" style="height:auto;">

        <div style="display:block;float:left;width:350px; height:auto;">
          <p>line 1<br>
          line2<br>
          line3<br>
          line4<br>
          line5<br>
          </p>
        </div>
        <div style="display:block;float:left;width:100px; height:auto;">
        <a href="#">Print</a>
        </div>

      </div>

我得到了这个结果

enter image description here

但是我如何才能得到如下所示的结果,容器 div 的自动高度与内部 float div 的大小相符?

enter image description here

提前致谢

最佳答案

添加这些

.msg_ok{
    overflow:hidden;
    zoom:1;
}

并删除 height:auto,这是无用的,因为高度始终是自动的(默认情况下)。您面临的问题是如何包含 float

关于html - 如何获得具有自动高度和 float div 的容器 Div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9582582/

相关文章:

javascript - 读取文件并返回数据(JavaScript)

javascript - 如何使用背景图像进行淡入淡出过渡

html - 更改悬停时按钮的颜色

HTML/CSS 列重叠

css - 带有缩略图的链接, float 的在它们下面有一些空白。如何摆脱它?

html - 使用CSS垂直居中两个div

css - 页脚元素不 float

javascript - 为什么在jsfiddle中显示ReferenceError : function is not defined?

css - asp.net core bootstrap 两列使用 post

html - 为什么这个跨度不继承其父级的填充?