Question

以下是我正在尝试做的示例代码

<div>
  <div style="float:left; width:220px; height:300px; border: 1px solid #aaa">
  Left div <br>float:left <br> fixed width 220px
  </div>

 <div>
    Right div. <br>No styles<br> Takes remaning width <br><br>
    There are some small blocks (one - four) with "float:left"


  <div class="small">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
  </div>

  <div>
   <div id='bottom_div1'>Some content which needs to appear below small blocks</div>
   <div id='bottom_div2'>Some content at the bottom, which needs to appear below small blocks</div>
  </div>

 </div>

</div>

工作小提琴here

我需要divs bottom_div1和bottom_div2中的内容出现在小块行下方的右侧div中（＆＃34;一个＆＃34; - ＆＃34;四个＆＃34;）。然而，＆＃34;明确：两者＆＃34;它显示在左侧div下方，并且＆＃34; clear：none＆＃34;它出现在小块的右侧。任何帮助将不胜感激！

Answer 1

只需将overflow: hidden添加到小div的容器中即可。

为什么工作？

overflow: hidden（以及除可见之外的值）会创建一个“block formatting context”，因此所有浮动div现在都包含在内部，浮动不再影响流量。

.small div {float:left; padding:10px; border: 1px solid #aaa}
.small {overflow: hidden}

<div>
    <div style="float:left; width:220px; height:300px; border: 1px solid #aaa">
        Left div <br>float:left <br> fixed width 220px
    </div>

    <div>
        <div>Right div. <br>No styles<br> Takes remaning width <br><br> There are some small blocks (one - four) with "float:left"</div>
    </div>

    <div class="small">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
    </div>

    <div id='inner-footer'>
        <div id='bottom_div1'>Some content at the bottom, which needs to appear below small blocks</div>
        <div id='bottom_div2'>Some content at the bottom, which needs to appear below small blocks</div>
    </div>
</div>

Answer 2

请尝试display: inline-block获取规则.small div，例如：

.small div {display: inline-block; padding:10px; border: 1px solid #aaa}

删除clear和bottom_div1的{{1}}个样式。似乎按照需要工作。

Answer 3

你几乎得到了它。你只需要重新安排你的div和样式。将下面的代码段与原始设置进行比较，找出差异：

.left-div {
float:left;
width:220px;
height:300px;
border: 1px solid #aaa;
}

.right-div {
float:left;
width: 300px;
}

.small div {
float:left;
padding:10px;
border: 1px solid #aaa;
}

#bottom_div1,
#bottom_div2 {
clear: left;
}

<div class="parent-div">

<div class="left-div">
Left div<br>
float:left<br>
fixed width 220px
</div>


<div class="right-div">
Right div.<br>
Only styles are float:left and width: 300px<br>
Takes remaning width<br><br>
There are some small blocks (one - four) with "float:left"

<div class="small">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</div>

<div id="bottom_div1">Some content at the bottom, which needs to appear below small blocks</div>
<div id="bottom_div2">Some content at the bottom, which needs to appear below small blocks</div>

</div> <!-- End of .right-div -->
	
</div> <!-- End of .parent-div -->

CSS只在父div中清除

3 个答案: