Question

如何在调整页面大小（页脚）时阻止div碰撞？我在网上看了一眼，我找不到我想要的东西 - 如果这个问题已经得到解答，请道歉。

我正在构建一个页脚，我想知道当页面调整大小时，如何阻止四个包含产品，公司，支持和支持的相互冲突。

我假设我需要在其中放置min-width，最好用4个嵌套的div创建一个新的div并应用min-width？如果没有，这会有更好的方法吗？

我还想让div在页面中央均匀分布。

HTML：

<footer>
<div id="insidefooterfixone">
     <h5>Product</h5> 
    <ul>
        <li>Domains</li>
        <li>Hosting</li>
        <li>Server</li>
    </ul>
</div>
<div id="insidefooterfixtwo">
     <h5>Company</h5> 
    <ul>
        <li>Team</li>
        <li>Our Customers</li>
        <li>Blog</li>
        <li>Terms of Service</li>
        <li>Privacy Policy</li>
        <li>Security</li>
    </ul>
</div>
<div id="insidefooterfixthree">
     <h5>Support</h5> 
    <ul>
        <li>Help Documents</li>
        <li>API Documents</li>
        <li>Tutorials</li>
        <li>FAQ - Database</li>
        <li>System Status</li>
    </ul>
</div>
<div id="insidefooterfixfour">
     <h5>Support</h5> 
    <ul>
        <li>helpdesk@data.co.uk</li>
        <li>01223 000000</li>
    </ul>
</div>
<div id="disclaimerfix">
    <p>2002-2014 Dataconnectivity Ltd.</p>
</div>
</footer>

CSS：

footer {
margin: 0;
padding: 0;
text-align: center;
width: 100%;
background-color: #3a3a3a;
list-style: none;
height: 450px;  
float: left;}

#insidefooterfixone h5, #insidefooterfixtwo h5, #insidefooterfixthree h5, #insidefooterfixfour h5 {
text-align:left;
margin-bottom: 0;
color:#FFFFFF;  }

#insidefooterfixone li, #insidefooterfixtwo li, #insidefooterfixthree li,   #insidefooterfixfour li {
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9; }

#insidefooterfixone ul, #insidefooterfixtwo ul, #insidefooterfixthree ul,     #insidefooterfixfour ul{
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9; }

#insidefooterfixone {
position: relative;
top: 0px;
left: 31.3%;
width: 150px;    }

#insidefooterfixtwo {
position: relative;
top: -115px;
left: 39.667%;
width: 150px;   }

#insidefooterfixthree {
position: relative;
top: -298px;
left: 48%;
width: 150px;    }

#insidefooterfixfour {
position: relative;
top: -458px;
left: 56.33%;
width: 150px;}

演示：http://fiddle.jshell.net/6Lgdx/

感谢。

P.S不要担心4个div对齐（转移到另一个应用程序时似乎都会改变）

Answer 1

您的div重叠的原因是因为您使用百分比来定位它们。在定位div时我会建议不要使用百分比，而是使用display: inline-block;来对齐列，如下所示：

<强> CSS

.column{
    max-width: 150px;
    display: inline-block;
    vertical-align: top;
    padding:0 10px;
}

请注意，我删除了小提琴中的所有left和top定位。我还在名为column的页脚列中添加了一个类。

Fiddle here

Answer 2

您使用百分比来对齐宽度的div和像素。你不应该这样做，因为如果屏幕缩小，div的宽度不会随之缩小。

使用像素定位div，或者以百分比表示宽度。

如何在页面调整大小（页脚）时阻止DIVS发生碰撞？

2 个答案: