为什么我的div浮动到正确的位置？

我有3 div的简单的HTML文件。前2个div需要浮动到左边，3个div需要浮动到右边。我只是为了演示目的而保持内联样式。为什么我的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>

来源

2014-10-01 elrado88

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

This is a jsfiddle.

之所以是width:70%有太多的宽度，推动其他申报单。

来源

2014-10-01 00:39:50

我明白你的意思！我已经这样做了，但现在我的右分区也被推下了。如何让它保持在最佳状态？ '

Left Div

Left Div #2

Test

' – elrado88 2014-10-01 00:46:28

@ elrado88不可能。 div的最大宽度是100％，** 70％+ 70％> 100％**。除非使用'位置：绝对' – 2014-10-01 00:53:35

最大width是100％，所以你有3 divs，其中2个等于100％的百分比（70 + 30），加上第三个div（Left Div＃2），你希望被左移其中有200px。

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

你必须修复无论是width:70%或width 30%以匹配100％（含200像素）

例如更改width:70%到width:50%和它的作品。

你总是可以尝试基础上，OP评论

你不能有3周的div总量超过100％，并将其内嵌显示什么inline-block

更新的答案显示出来，正如你在评论中所做的那样：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有关显示和inline-block的

来源

2014-10-01 00:44:32 dippas

迪帕斯。感谢您的回应。我做到了，解决了问题。但现在我的右div不断被推下来，当添加左div元素...我怎样才能解决这个问题。这里有一个简单的例子... '

Left Div

Left Div #2

Test

' – elrado88 2014-10-01 00:53:04

你一直在犯错：100％是屏幕的总数，所以100％-70％-70％-30％= -70％。我会为你做一个小提琴并更新我的答案。 – dippas 2014-10-01 10:17:44

为什么我的div浮动到正确的位置？

回答

相关问题