兩個流體div與固定寬度之間的固定寬度div

我試圖創建一個固定寬度div的中間兩個流體div之間的佈局。該配置應該適合Bootstrap行。我將如何做到這一點？兩個流體div與固定寬度之間的固定寬度div

這裏有一個例證：

enter image description here

2012-09-15 Joe Mornin

您可以用表使這很容易，但這裏是你一個div版本：

<!DOCTYPE> 
<html> 
    <head> 
     <style> 
      .d1 { 
       background-color: #AAAAFF; 
       vertical-align: top; 
       margin-right: -75px; 
       display: inline-block; 
       width: 50%; 
       position: relative; 
       z-index: 0; 
      } 

      .d1 .cnt { 
       padding-right: 75px; 
      } 

      .d2 { 
       background-color: #AAFFAA; 
       vertical-align: top; 
       width: 150px; 
       display: inline-block; 
       position: relative; 
       z-index: 2; 
      } 

      .d3 { 
       background-color: #FFAAAA; 
       vertical-align: top; 
       margin-left: -75px; 
       display: inline-block; 
       width: 50%; 
       position: relative; 
       z-index: 1; 
      } 

      .d3 .cnt { 
       padding-left: 75px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="d1"><div class="cnt">I'm trying to create a layout with a fixed width div centered between two fluid divs. The configuration should fit within a Bootstrap row. How would I do this? Here's an illustration:</div></div><div class="d2">I'm trying to create a layout with a fixed width div centered between two fluid divs. The configuration should fit within a Bootstrap row. How would I do this? Here's an illustration:</div><div class="d3"><div class="cnt">I'm trying to create a layout with a fixed width div centered between two fluid divs. The configuration should fit within a Bootstrap row. How would I do this? Here's an illustration:</div></div> 
    </body> 
</html>

由於div的是inline-block的，不要他們之間不增加空間或新線。

來源

2012-09-15 18:47:41 Night2

兩個流體div與固定寬度之間的固定寬度div

回答

相關問題