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

【问题标题】：Some DIV is cutting another which is floating left一些 DIV 正在切割另一个向左浮动的 DIV
【发布时间】：2019-08-18 19:04:49
【问题描述】：

我正在使用 WordPress 中的页面模板（没关系）。我会尝试插入一张图片来表达我的问题。

LEFT-DIV 是 CONTENT-DIV 的子级，具有 float:left。它们都具有相同的背景颜色。 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

【问题讨论】：

你试过把那个框设置为width="100%"??
你能从这里发布 html 和 css 吗？描述它是不够的。

标签： html css

【解决方案1】：

为您的左 div 添加背景颜色并使其变得重要

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

您可以在此处查看示例： http://jsfiddle.net/pvrxG/5/

【讨论】：

如果LEFT-DIV有margin-right，而NOTE-DIV有border和border-radius怎么办？
我不明白你的意思，你可以在这里找到一些东西：stackoverflow.com/questions/343313/…

【解决方案2】：

这样的东西好不好：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 的另一种组合。

【讨论】：

这不是完美的解决方案，因为正如我所说，NOTE-DIV 可以有边框和边框半径。但如果没有更好的办法，我会使用 z-indexes 的建议。

【解决方案3】：

您的 #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的OUTSIDE添加一个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 class="some-note" style="background:aqua; clear:both">Text of new note</div>
</div>

【讨论】：

在第二种情况下，SOME-DIV 将始终低于

【解决方案4】：

您可以在“some note”上设置最大宽度；如果您使用示例中的显式像素测量或基于百分比的宽度，这将很简单。

.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

【讨论】：