如何防止一个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%; 
}