我有一个包含 3 个 div 的简单 HTML 文档。前 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>
最佳答案
最大 width 是 100%，所以你有 3 个 div，其中 2 个百分比 (70+30) 等于 100%，加上第 3 个 div(Left Div #2) 你想要向左浮动的 200px。
所以 100%-70-30=0 和 0-200px = -200px。
您必须修正 width:70% 或 width 30% 才能匹配 100%(200px)
例如，将 width:70% 更改为 width:50% 即可。
你总是可以尝试在 inline-block 中显示它们
根据 OP 评论更新了答案
你不能有 3 个 div 的总数超过 100% 并且它们内嵌显示的内容，正如你在评论中所做的那样:70%+70%+30% = 140% > 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关于盒子大小
查看更多信息 here关于显示和行内 block
关于html - 为什么我的div向右浮动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26132386/