2

以下是我的html和css代码

<body>
<div style="display: inline; postion: relative; float: left; width: 20%; min-height: 350px; background-color:red">
TESSSSSSSSSTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT123
</div>
<div style="display: inline; postion: relative; float: left; width:80%; min-height: 350px; background-color:green">

</div>

</body>
</html>

在窗口调整大小时，两个 div 重叠，有什么办法可以避免这种情况吗？无论窗口大小如何，我都希望两个 div 始终保持在一行中（而且两个 div 的内容都包含在每个 div 中）。

感谢任何帮助，谢谢，

4

4 回答 4

2

它们widths是使用该%值定义的，因此它们相对于浏览器大小会增长/缩小。为了使您的文本不与相邻的文本重叠，请<div>添加word-break: break-all;到<div>包含文本的第一个 .. 中，还请提及您使用的浏览器。

例子

于 2013-03-01T05:00:58.240 回答
0

它们不重叠，它们的宽度根据 变化<body>，它们一个接一个地保持在同一条线上。

于 2013-03-01T04:59:24.750 回答
0

div 不重叠，您的测试文本根本没有空格，浏览器只会重新调整空格上的文本大小。尝试在测试文本中添加空格，您会看到文本会重新调整大小（现在，您还应该看到 div 实际上没有重叠）。

此外，如果您将元素设置为内联，那么像您所做的那样让元素向左浮动是没有意义的。如果您打算将 div 用作网站布局的一部分，我建议让它们向左浮动，这将使 div 保持为块元素，这允许使用 CSS 进行更多样式设置。

于 2013-03-01T05:09:27.150 回答
0

html

<div class="firstDiv"></div>
<div class="secondDiv"></div>

css

.firstDiv {
    height:100px;
    width:60%;
    float:left;
    background-color:#222;
}
.secondDiv {
    height:100px;
    width:60%;
    float:left;
    background-color:#000;
}

使用百分比%让你的 div 更可修复 DEMO

于 2013-03-01T05:11:28.390 回答