Question

在不同分辨率下左侧浮动div旁边的底部是什么的主要原因。

发件人：

+------------+     +-----------------------------+
| float: left|     |     float: right            |
+------------+     +-----------------------------+

要

+------------+
| float: left|
+------------+
                   +-----------------------------+
                   |     float: right            |
                   +-----------------------------+

如何解决这个问题会在任何决议中处于同一位置？

DEMO CTRL + MOUSE上下滚动以查看更改

请注意我想以像素为单位修复它，而不是指定宽度的百分比。

我也可以通过设置填充从左到右浮动元素或从右到左浮动元素填充为零来修复它。但为什么它在更小或更大的分辨率下表现不同？

Answer 1

两个元素的总宽度大于总可用宽度。它更像是：

自：

+------------+     +-----------------------------+
| float: left|     |     float: right            |
+------------+     +-----------------------------+

要:(注意重叠）

+------------+
| float: left|
+------------+
             +-----------------------------+
             |     float: right            |
             +-----------------------------+

它们可能看起来不像重叠，但如果你考虑填充和边距，它们会。如果将宽度设置为百分比，则应该可以正常工作。

Answer 2

尝试以百分比给出宽度并将“float：right”和“margin-top：-500px”赋予右侧部分

请注意：我只给你一个例子，你可以根据需要设置“margin-top”但它必须是nagative。

<强>更新

您可以使用中心标记。这是一个例子

<center>
<div style="width:800px">
 <div style="float:left; width:300px"></div> /*give width to adjust to both*/
 <div style="float:Right; width:500px"></div>
</div>
</center>

如果您的屏幕分辨率发生变化，无论您的屏幕是大还是小，它都会粘在中心

假设我的scree宽度是1000px然后你可以设置宽度为div div 300px而右边div为500px

试试吧......

不同分辨率的浮动问题

2 个答案: