css-how to set three parallel DIV？

Question

如何設置三個水平像這樣排列？ 左側寬度：150px，右側寬度：150px，中心一個寬度是其餘像素，中心一個最小寬度將是800px。所有的div都需要一個位置：相對的。 謝謝。

Answer 1

在這裏，我們走了，HTML是如下：

<div id="wrap"> 

    <div class="left"></div> 
    <div class="center"></div> 
    <div class="right"></div> 

    <div class="clearBoth"></div> 

</div> 

，現在下面的CSS：

#wrap { 
width: auto; 
position: relative; 
} 

.left, .right { 
width: 150px; //or use 30% 
float: left; 
} 

.center { 
float: left; 
min-width: 800px; //or use 60% 
width: auto; 
position: relative; 
} 

.clearBoth { 
clear: both; 
} 

Answer 2

如果要定義固定的最大寬度，請使用換行。

.wrap { 
    overflow:hidden; 
    width:1200px; /* Optional */ 
} 

.left { 
    float:left; 
    width:150px; 
} 

.middle { 
    float:left; 
    min-width:800px; 
} 

.right { 
    float:left; 
    width:150px; 
} 

<div class="wrap"> 
    <div class="left">Left</div> 
    <div class="middle">Middle</div> 
    <div class="right">Right</div> 
</div>