Question

我知道这可能非常简单，但我已经坚持了一段时间试图摆弄它。

基本上，这是我的html设置：

<div id="main-div"><!-- Blue -->
     <div id="sub-div"><!-- Red -->
       <div class="content-div">
        <p>This is the text. I need the button to be placed in content-div, which technically is, but it appers outside the div.</p>
        <a href="#" class="button-green">BUTTON</a>
       </div>
     </div>
   </div>

这是CSS类的小提琴： http://jsfiddle.net/03knuf7z/1/

我想要实现的目标是让<p> paragraph和<a> button位于被sub-div

包围的main-div内

我一直试图在没有固定content-div高度的情况下实现这一目标，所以我试图将height: auto;放入我的css中，希望content-div足以覆盖两者<p>和<a>元素，但这不起作用，因为按钮仍然显示在content-div框之外，就像在小提琴中一样。

我可以通过将固定高度添加到content-div来获得所需的结果，因此，如果我将auto中的height: auto;更改为height: 150px;，则可以正常工作元素，段落和按钮都在框中。

但是考虑到小屏幕设备，例如手机屏幕的响应度，我想避免使用固定值。

有没有办法在没有固定高度的情况下做到这一点？

Answer 1

您需要在float按钮后添加clear元素。您可以将其添加到HTML中，或使用CSS :after伪元素在content-div的末尾创建虚拟元素：

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

Updated fiddle

Answer 2

这可以通过明确的课程轻松修复。我已更新了您的JSFiddle。

我添加了以下课程：

.clear {
    clear: both;
}

按下按钮后：

<div class="clear"></div>

您还可以使用:after属性。然后你将使用以下CSS：

.content-div:after {
    display: block;
    content: " ";
    clear: both;
    height: 0;
}

Answer 3

将overflow-hidden;添加到.content-div。

.content-div{
  font-size: 18px;
  overflow: hidden;
}

div里面的divs定位 - 没有div固定高度

3 个答案: