Question

以下是我的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>

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

感谢任何帮助，谢谢，

Answer 1

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

Example

Answer 2

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

Answer 3

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

另外，如果将元素设置为内联，那么将元素浮动就没有意义了。如果您打算将div用作网站布局的一部分，我建议将它们保持向左浮动，这样可以将div保留为块元素，这样可以更好地使用CSS。

Answer 4

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

css两个div彼此相邻，没有重叠的窗口调整大小

4 个答案: