css相邻的两个div在窗口上不重叠调整大小_Css

css相邻的两个div在窗口上不重叠调整大小

css

css相邻的两个div在窗口上不重叠调整大小,css,Css,下面是我的html和css代码 <body> <div style="display: inline; postion: relative; float: left; width: 20%; min-height: 350px; background-color:red"> TESSSSSSSSSTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT123 </div> <div style="display: in

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


TESSSSSSSTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT123

在windows resize上，两个div重叠，有没有办法避免这种情况？我希望无论窗口大小如何，两个div始终保持在一行（而且两个div的内容都包装在每个div中）

感谢您的帮助，

它们不会重叠，它们的宽度会随着

的变化而变化，它们一个接一个地保持在同一行。

它们的

宽度

是使用

值定义的，因此它们相对于浏览器大小会增大/减小。为了使文本在相邻的

中不重叠，请添加

分词：全部分词

到包含文本的第一个

。。另外，请说明您使用的浏览器

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

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

html

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

使用百分比

使您的div更加固定

如果我将内容放在左分区并调整窗口大小，则窗口将逐渐位于右分区下面！好吧，那么你的问题是错的。你想让内容有什么样的行为？没有人，我有两个div在旁边，每个div中都有一些内容，当我调整窗口大小时，右div超过左div的内容。这是我的问题。我知道我可以对左分区使用全部打断。但是如果我在左分区中有另一个分区的内容，它就不起作用了。你不回答我：（如果

全部打断对你不起作用）你希望出现什么样的行为？假设我在左分区的右上角有一个按钮，当我调整窗口大小时，按钮逐渐被右边的div覆盖。我预计不会有过圈或我的按钮没有被覆盖Hanks，而是在文本旁边，我也有一部分内容在左部分，被右部分覆盖。有解决方案吗？你能给我一个例子，当你说左部分右上方的按钮时？我知道我在给你一个例子。当我有一个文本时，它很好，但是当另一个内容，如按钮或其他东西不起作用时，它们就在上面eachother@ComeRun嗨，你看演示了吗？是的，伙计，我要一条线上的div。你和我在一起
.firstDiv {
    height:100px;
    width:60%;
    float:left;
    background-color:#222;
}
.secondDiv {
    height:100px;
    width:60%;
    float:left;
    background-color:#000;
}