Question

我有简单的HTML文档，包含3个div。前2个div需要向左浮动，3 div需要向右浮动。我将样式保持为内联仅用于演示目的。

我试图让第二个div元素向左浮动，但它会一直浮动到右边。这是我试图浮动到左边的div元素

<div style="width: 200px; float: left">Left Div #2</div>

任何人都可以帮我纠正一下吗？谢谢!!!

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div style="width: 70%; float: left; clear: left">Left Div</div>
<div style="width: 200px; float: left">Left Div #2</div>


<div style="width: 30%; float: right; clear: right">Test</div>




</body>
</html>

Answer 1

最大width为100％，因此您有3个divs，其中2个百分比（70 + 30）等于100％，加上第3个div（左） Div＃2）你想要向左浮动，它有200px。

所以100％-70-30 = 0和0-200px = -200px。

您必须修复width:70%或width 30%才能匹配100％（200px）

例如，将您的width:70%更改为width:50%即可。

您始终可以尝试在inline-block

中显示它们

根据OP评论更新了答案

你不能拥有总计超过100％的3个div以及它们显示为内联的内容，就像你在评论中所做的那样：70％+ 70％+ 30％= 140％＆gt; 100％。

此代码有效：

div { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
 padding:10px;   
 display:inline-block;
 vertical-align:top;
 width:30%   
}
.r1 {float:right} /*just because you said you want your 3rddiv floated right */

<div class="l1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed nunc eu sem bibendum maximus. Quisque ante mi, porta at egestas sit amet, tempor vel ante. Aenean libero risus, mollis id efficitur sed, fermentum in lacus. Quisque ultricies eleifend leo, at convallis dui auctor eu. Vestibulum eu odio varius, sagittis lectus sit amet, varius elit. Aenean tincidunt vel eros in rhoncus. Curabitur sed est lorem. Nam sed lorem vestibulum, sagittis ex nec, euismod ipsum. Donec at eros mollis, pulvinar ex at, porttitor arcu. Integer posuere lectus sit amet nisl volutpat, pharetra commodo risus congue. Aenean tincidunt elit nec pulvinar vestibulum. Suspendisse potenti. Suspendisse volutpat magna nec nisl lacinia accumsan. Donec a auctor ante.
</div>
<div class="l2">Aliquam iaculis id sapien at hendrerit. Phasellus tempus euismod felis et interdum. Mauris vehicula felis sed nisl auctor lacinia. Mauris posuere orci at porttitor viverra. Mauris eget bibendum purus. Cras tristique dignissim ex. Phasellus eu ipsum finibus neque lacinia laoreet et non neque.</div>
<div class="r1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed nunc eu sem bibendum maximus. Quisque ante mi, porta at egestas sit amet, tempor vel ante. Aenean libero risus, mollis id efficitur sed, fermentum in lacus. Quisque ultricies eleifend leo, at convallis dui auctor eu. Vestibulum eu odio varius, sagittis lectus sit amet, varius elit. Aenean tincidunt vel eros in rhoncus. Curabitur sed est lorem. Nam sed lorem vestibulum, sagittis ex nec, euismod ipsum. Donec at eros mollis, pulvinar ex at, porttitor arcu. Integer posuere lectus sit amet nisl volutpat, pharetra commodo risus congue. Aenean tincidunt elit nec pulvinar vestibulum. Suspendisse potenti. Suspendisse volutpat magna nec nisl lacinia accumsan. Donec a auctor ante.</div>

添加box-sizing属性仅用于添加padding属性而不更改divs的宽度，因此仅用于演示目的。

查看有关盒子大小调整的更多信息here

查看有关display和inline-block

的更多信息here

Answer 2

将width:70%更改为匹配值。（在我的情况下，width:30%）

This is a jsfiddle.

width:70%之所以有太多宽度来推动其他div。

为什么我的div漂浮到右边？

2 个答案: