1

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

我喜欢将内容添加到在图像周围浮动的主要内容，作为解释。对于这些图像，我也使用“float:right”，它按预期工作。

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

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

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

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

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

我了解到我应该在段落之间使用 clear:right 样式以将它们分开，并且按照描述的方式工作。

这是我用于每个 img+text 块的代码：

<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 更远，那么内容中就会出现间隙，一直到侧边栏为止。你可以在这里看到效果：带有侧边栏影响的网站示例 clear:right

有什么建议可以解决这个问题，即避免 clear:right 不会受到侧边栏高度的影响，而只会受到本地文本+图像块的影响？

到目前为止，我发现的一个建议是避免在侧边栏使用浮动，而是使用表格。但这会导致新的复杂性（例如，除非我更改 html 内容的顺序，否则侧边栏最终会出现在左侧，这可能会导致屏幕较小的新问题等等）。

4

2 回答 2

1

您的内容区域和侧边栏需要位于不同的div标签中：

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

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

编辑：

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

overflow-y: hidden;

然后，将margin-right您的boxesdiv 上的更改为：

margin: 0 2em;

那应该为您解决问题。

于 2012-10-10T14:48:58.990 回答
0

享受代码。

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;

}
于 2012-11-02T15:23:47.003 回答