Question

我有一个使用右侧边栏的网站。侧边栏使用“float：right”作为CSS样式。

我喜欢将内容添加到主文件中，文本浮动图像，作为解释。对于那些图像，我也使用“float：right”，它按预期工作。

当我添加图像的几个部分时，挑战就开始了，如下所示：

1st text   +-----+
text text  | img |
           +-----+

2nd text   +-----+
text text  | img |
           +-----+

默认情况下，第2段将在第1段结束后立即开始，如下所示：

1st text   +-----+
text text  | img |
2nd text   +-----+
text text
           +-----+
           | img |
           +-----+

我了解到我应该使用明确的样式：在段落之间保持它们分开，并按照描述的方式工作。

这是我为每个img +文本块使用的代码：

<div>
<img style="float:right" src="animg.png" width="502" height="241" alt="bla bla">
<p>Text for the image.</p>
<div style="clear:right"></div>
</div>

然而，现在边栏开始出现问题：如果侧边栏比左边的clear：right出现的位置更低，那么内容中会有一个间隙，直到侧边栏开始。您可以在此处查看效果：website example with sidebar influencing clear:right

任何建议如何处理，即避免clear：right不会受到侧边栏高度的影响，只能受到本地文本+图像块的影响？

到目前为止，我发现的一个建议是避免在侧边栏中使用浮点数，而是使用表格。但这会导致新的复杂情况（例如，除非我改变我的html内容的顺序，否则侧边栏会在左侧结束，这可能会导致更小的屏幕和诸如此类的新问题。）

Answer 1

您的内容区域和侧边栏需要位于单独的div标记中：

<body>
    <div>Header</div>
    <div>Content</div>
    <div>Sidebar</div>
</body>

将内容浮动，并将侧边栏向右移动。然后，您可以根据需要在每个部分中添加任意数量的元素。只要HTML格式正确（即在需要时不会丢失结束标记）并且它们都保持在父级的宽度内，它们就不会有问题。

编辑：

使用静态侧边栏和流体（弹性）主区域，它会变得更复杂一些。首先，从#main中删除右边距，然后添加：

overflow-y: hidden;

然后，将margin-right div上的boxes更改为：

margin: 0 2em;

那应该为你解决问题。

Answer 2

享受代码。

HTML：

<div class="main">
    <div class="box-one">Your content here</div>
    <div class="box-two">Put photo here</div>
    <div class="clear"></div>

CSS：

.clear{
    clear:both;
}
.main{
    width:100%;
    background:#424242;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right:5px;
}

.box-one{
    width:260px;
    background:#FFF;
    float:left;

}
.box-two{
    width:100px;
    background:#FFF;
    float:right;

}

使用float的侧边栏使用float + clear与内容冲突

2 个答案: