爲什麼我的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浮動到正確的位置？

回答

相關問題