如何使用可变宽度以相等的间距获得三个div？

我正在设计一个联系表单的网页，您可以看到here。如何使用可变宽度以相等的间距获得三个div？

正如你所看到的页面设计为可变宽度。我希望在图像，表单和内容区域的边缘之间具有相等的间隔，即，将有四个宽度相等的空间。

目前我设计的图像是以宽度为20％的DIV为中心，接触窗体以宽度为60％的DIV为中心。这可以正常工作，但效果并不好，因为随着浏览器宽度的增加，联系人窗体与图像之间的间距大于图像与内容区域边缘之间的间距。我想找到一种方法来保持所有的空间等宽。

下面是相关的CSS：

#box { 
    width: 100%; 
    min-width: 800px; 
} 

#left { 
    float: left; 
    width: 20%; 

} 

#center { 
    float: left; 
    height: 100%; 
    width: 60%; 
} 

#right { 
    height: 100%; 
    margin-left: 80%; 
} 

.dharma { 
    width: 185px; 
    margin: 0px auto 0; 
    padding-top: 25px; 
} 

#contact-form { 
    width: 471px; 
    margin: 25px auto; 
}

，这里是相关的HTML：

<div id="box"> 

<div id="left"> 
<div class="dharma"><img src="images/dharma.jpg"></div> 
</div> 

<div id="center"> 
<div id="contact-form"> 
[form HTML] 
</div> 
</div> 

<div id="right"> 
<div class="dharma"><img src="images/dharma.jpg"></div> 
</div> 

</div>

有人能帮助这吗？

感谢，

尼克

来源

2011-07-11 Nick

你所描述的问题是完美的CSS3灵活框的布局，这将在Chrome，Safari浏览器和Firefox的工作。所有你需要的是：

#box { 
    display: -moz-box; 
    display: -webkit-box; 
    display: box; 
} 

#left, #center, #right { 
    -moz-box-flex: 1.0; 
    -webkit-box-flex: 1.0; 
    box-flex: 1.0; 
}

不幸的是，这不会在IE中工作，但我希望这仍然有帮助。

来源

2011-07-11 23:48:32 cwadding

谢谢。它在Chrome和Safari中运行良好，但Firefox中没有空格。它也应该在Opera中工作，因为它现在还没有，＃left，＃center，＃right DIV在#box DIV的中心堆叠在另一个之上 – Nick

只会设置一个规则将所有的箱子都对他们的加入保证金不行？

事情是这样的：

#box { 
    width: 100%; 
    min-width: 800px; 
} 

#left, #center, #right { /* adds spacing between columns of equal size */ 
    margin: 0 2%; 
} 

#left { 
    float: left; 
    width: 16%; /* reduced by 4% for margins */ 

} 

#center { 
    float: left; 
    height: 100%; 
    width: 56%; */ reduced by 4% for margins */ 
} 

#right { 
    height: 100%; 
    margin-left: 80%; 
}

来源

2011-07-11 23:01:32 Nightfirecat

如何使用可变宽度以相等的间距获得三个div？

回答

相关问题