如何防止一個div在調整大小時與另一個div重疊？

Question

下面是一個例子：http://la.truxmap.com/truckpage?id=coolhaus

當我讓瀏覽器窗口從右側變窄時，最近的tweets div會在容器div下面。我想這樣做，以便最近的tweets div不會比容器div的右側邊框更遠離左側。我一直試圖找出是否可以用CSS來完成，但我似乎無法得到它。是否有一個簡單的JavaScript解決方案符合法案？

謝謝！

Answer 1

您可以選擇使用液體佈局或使用css屬性位置。

液態佈局：

你有你的包裝3周DIV的divand你希望他們調整較小的瀏覽器窗口中，你可以用百分比即成爲可變寬度做到這一點：

CSS：

.wrapper { 
    width:100% 
} 
.divleft { 
    float:left; 
    width:20% 
} 
.divmiddle { 
    float:left; 
    width:60% 
} 
.divright { 
    float:left; 
    width:20% 
} 

HTML：

<div class="wrapper"> 
    <div class="divleft">left</div> 
    <div class="divmiddle">middle</div> 
    <div class="divright">right</div> 
</div> 

正如我所說的，另一種可能性是將css屬性的位置分配給您的不同DIV。

自己嘗試一下，它很容易：

http://www.w3schools.com/Css/pr_class_position.asp

Answer 2

你也可以讓他們從垂直重疊：

.noOverlap{ 
    float:left; 
    width:100%; 
}