Question

我正在使用WordPress中的页面模板（无所谓）。我会尝试插入一张图片来表达我的观点。

http://img651.imageshack.us/img651/9017/picmic.png

LEFT-DIV是CONTENT-DIV的孩子，有浮动：左。它们都具有相同的背景颜色。 CONTENT-DIV可以在任何地方有另一个孩子NOTE-DIV。它可以是LEFT-DIV，它可以在下面。所以我肯定不知道它的宽度。此外，CONTENT-DIV中可能会有一些NOTE-DIV。问题是NOTE-DIV有另一种背景颜色并切割（重叠）LEFT-DIV。

可以避免这种情况吗？

我的代码如下所示：

<div id="content" style="background:#FFF;">
    <div id="left-div" style="float:left; width:200px; height:700px; min-height: 700px; margin-right:20px;"></div>
    <p>...Content...</p>
    <div class="some-note" style="background:aqua;">Text of note</div>
    <p>...Content...</p>
    <p>...Content...</p>
    <p>...Content...</p>
</div>

这是一个真实的例子： http://jsbin.com/iqerug/4/edit#preview

Answer 1

为您的left-div添加背景颜色并将其设为重要

#left-div{
float:left;
width:200px;
height:700px;
min-height:700px;
margin-right:20px; 
background:#fff !important;   
}

你可以在这里看到一个例子： http://jsfiddle.net/pvrxG/5/

Answer 2

＃left-div在＃note-div之前关闭。试试这个：

<div id="content" style="background:#FFF;">
    <div id="left-div" style="float:left; width:200px; height:700px; min-height: 700px; margin-right:20px;">
        <p>...Content...</p>
        <div class="some-note" style="background:aqua;">Text of note</div>
   </div>
   <p>...Content...</p>
   <p>...Content...</p>
   <p>...Content...</p>
</div>

如果要添加left-div的note-div OUTSIDE，请确保先清除浮动，如

<div id="content" style="background:#FFF;">
    <div id="left-div" style="float:left; width:200px; height:700px; min-height: 700px; margin-right:20px;">
        <p>...Content...</p>
        <div class="some-note" style="background:aqua;">Text of note</div>
   </div>
   <p>...Content...</p>
   <p>...Content...</p>
   <p>...Content...</p>
  <div class="some-note" style="background:aqua; clear:both">Text of new note</div>
</div>

Answer 3

这样的事情会很好：http://jsbin.com/isawoz/3

<head>
  <style>
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; }
    #left-div{ float:left; width:150px; height:200px; margin:20px; border:1px solid black; }
    #content{ background:yellow; width:600px;height:500px;border:1px solid black;margin:10px; z-index:-1; }
    .some-note { background:aqua; /*float:left; */z-index:1; }
  </style>
</head><body>
  <div id="content">
    <div id="left-div"><img src="http://i.imgur.com/aSS3G.png" width="150px" height="200px" /></div>
    <p>...Content...</p>
    <div class="some-note">Text of note</div>
    <p>...Content...</p>
    <p>...Content...</p>
    <p>...Content...</p>
    <p>...Content...</p>  
    <p>...Content...</p>
    <p>...Content...</p>
    <div class="some-note">Text of note</div>
    <p>...Content...</p>
    <p>...Content...</p>
    <p>...Content...</p>
    <p>...Content...</p>
  </div>
</body>

如果您需要重叠文本，请使用另一种z-index组合。

Answer 4

您可以在＆＃34;某些音符＆＃34 ;;上设置最大宽度。这可以直接使用像您的示例中的显式像素测量，或者如果您实现它们，则使用基于感知的宽度。

.some-note {
background:aqua;max-width:420px/*that's 600px parent - 150px left div - 20px margin*/;float:left;margin:10px 0;}

jsbin：http://jsbin.com/iqerug/6/edit#preview

一些DIV正在切割另一个向左浮动的DIV

4 个答案: