Question

我并排放置了两个div，一个包含徽标，第二个包含文本字段。当我以更高的分辨率查看此页面时，一切正常。但是，当我调整窗口大小时，第二个div也会变得很糟糕，并且低于第一个div。

但我希望他们能够在任何决议中并肩站在一起。请为此提供代码解决方案。

Answer 1

我猜你用漂浮物把它们放在一起。您可以使用另一个希望在其中查看页面的最小宽度div来包围两个div。这会阻止第二个降到第一个以下

<div id="wrapper">
    <div id="logo">...</div>
    <div id="text">...</div>
</div>

它的风格是：

#wrapper { width: 980px; }
#wrapper div { float: left; }
#logo { width: 200px; }
#text { width: 780px; }

这样的事情。如果有人将窗口调整为比980px更窄（或使用更低的屏幕分辨率），那么你将获得水平滚动。

<强> //修改作为对评论的回应，您可以使用min-width使其更灵活。会导致IE

#wrapper { min-width: 980px; }
#wrapper div { float: left; }
#logo { width: 200px; }
#text { min-width: 780px; }

IE6不支持

min-width，因此您可能需要修复它。

Answer 2

如果它不合适，基本上第二个div需要去某个地方。在你的情况下，唯一的选择是裁剪，所以将行包装在一个带溢出的div中：hidden。

Answer 3

第二个div在第一个div下方滑动，因为容器中的宽度不足以允许它们并排放置。

这可以通过两种方式解决：

将容器节点的“overflow”属性更改为“hidden”（甚至溢出）。
设置容器的“最小宽度”。然而，这种方法受到IE所需的特殊黑客的影响。而且，最小宽度方法通常不能突然进行。它必须从页面设计开始计划。

希望有所帮助。

喝彩！

Answer 4

我尝试从两个div的总数中减少1％（1％未使用）的宽度....似乎对我有用:) Myabe对某人有用。

CSS：

#Content {
width: 100%; 
height: auto; 
margin-top: 26px; 
float: left;

}
#ContentLeft {
margin-left: 5px; 
float: left; 
width: 19%;
}

#ContentMain {
width: 80%; 
margin-right: 5px; 
float: right;
}

HTML：

<html>
<body>
<div id="Content">
<div id="ContentLeft">Left menu</div>
<div id="ContentMain">Here goes the bigger content</div>
</div>
</body>
</html>

Answer 5

只是你的10px（保证金左边+保证金权利）超过1％。这应该有效：

#Content {
width: 100%; 
height: auto; 
margin-top: 26px; 
float: left;
}

#ContentLeft {
margin-left: 1%; 
float: left; 
width: 19%;
}

#ContentMain {
width: 79%; 
margin-right: 1%; 
float: right;
}

当我调整窗口大小时，Div部分会移动

5 个答案: