CSS - 4列（固定流體固定）

我見過三列（固定流體固定）的例子。不過，我需要一個四列解決方案的例子。CSS - 4列（固定流體固定）

兩個外部列是固定的。兩個內柱是流體。

固定|流體|流體|固定

2014-04-13 Mike Stuart

「流體」是什麼意思？你想有兩個「流體」列來分享剩餘空間嗎？ 50％/ 50％？ – Gorgsenegger

正確...所以如果我爲第一列和最後一列設置寬度（300px，400px或其他），則中間兩列填充相應調整屏幕大小/分辨率的空間。 –

您可以使用calc。

.first, .last { 
    width: 300px; 
} 
.middle { 
    width: calc(50% - 300px); 
}

您可能也想要應用供應商前綴。

來源

2014-04-13 05:45:06 bjb568

哦，很酷。所以我做了一個谷歌搜索，並找到了這個。 http://jonkemp.com/css/cross-browser-css-calc.html Calc的其他資源跨瀏覽器？ –

[MDN]（https://developer.mozilla.org/en-US/docs/Web/CSS/calc），[Caniuse]（http://caniuse.com/#feat=calc），[Spec]（ http://www.w3.org/TR/css3-values/#calc-notation），[HTML5 rocks]（http://updates.html5rocks.com/2012/03/CSS-layout-gets-smarter-with -calc） – bjb568

@ bjb568 calc不是一個標準。 https://developer.mozilla.org/en-US/docs/Web/CSS/calc，在發佈之前您可能會考慮跨瀏覽器兼容性，以下功能存在風險並且可能在CR期間被刪除：'calc（）'，'toggle（）'，'attr（）'。來源：http：//www.w3.org – ProllyGeek

HTML

<div id="framecontentLeft"> 
    <div class="innertube"> 
     <h1>Left Frame 1</h1> 
    </div> 
</div> 

<div id="framecontentRight"> 
    <div class="innertube"> 
     <h1>Right Frame 4</h1> 
    </div> 
</div> 


<div id="maincontent"> 
    <div class="inner1"> 
     <h1>Middle Frame 2</h1> 
    </div> 
    <div class="inner2"> 
     <h1>Middle Frame 3</h1> 
    </div> 
</div>

CSS

#framecontentLeft, #framecontentRight{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 100%; 
    background-color: navy; 
    color: white; 
} 

#framecontentRight{ 
    left: auto; 
    right: 0; 
    width: 150px; 
    background-color: navy; 
    color: white; 
} 

#maincontent{ 
    position: fixed; 
    top: 0; 
    left: 200px; 
    right: 150px; 
    bottom: 0; 
    background: #fff; 
    overflow: hidden; 
} 

.inner1{ 
    height: 100%; 
    background:red; 
    width:50%; 
    float:left; 
} 
.inner2{ 
    background:green; 
    height: 100%; 
    width:50%; 
    float:right; 
}

DEMO

來源

2014-04-13 06:13:05 4dgaurav

使用位置：像這樣修復可能會破壞一些佈局。 – bjb568

OP要固定|流體|流體|固定佈局。 – 4dgaurav

我喜歡Flexbox的比calc更好，如果你可以使用它。它更靈活。

<div id="container"> 
    <div class="fixed"> 
     Fixed 
    </div> 

    <div class="fluid"> 
     Fluid 
    </div> 

    <div class="fluid"> 
     Fluid 
    </div> 

    <div class="fixed"> 
     Fixed 
    </div> 
</div>

#container { 
    display: flex; 
} 

.fixed { 
    width: 15em; 
} 

.fluid { 
    flex: 1; 
}

Dabblet.這當然，讓所有列在同一高度，如果你可以假設的是，這樣做沒有Flexbox的也沒多一個容器（注意的問題是，如果流體元素贏得「T一定是比固定的人高，那麼你就應該給內部容器max-height）：

<div id="container"> 
    <div class="fixed left"> 
     Fixed 
    </div> 

    <!-- Fluid container! No, you don’t have to call it this. --> 
    <div class="bottle"> 
     <div class="fluid"> 
      Fluid 
     </div> 

     <div class="fluid"> 
      Fluid 
     </div> 
    </div> 

    <div class="fixed right"> 
     Fixed 
    </div> 
</div>

#container { 
    position: relative; 
} 

.fixed { 
    bottom: 0; 
    position: absolute; 
    top: 0; 
    width: 15em; 
} 

.fixed.left { 
    left: 0; 
} 

.fixed.left { 
    right: 0; 
} 

.bottle { 
    margin: 0 15em; 
    overflow: hidden; 
} 

.fluid { 
    float: left; 
    width: 50%; 
}

，當然，如果.bottle溢出，您需要某種清除::after。

來源

2014-04-22 00:59:55 Ryan

CSS - 4列（固定流體固定）

回答

相關問題