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列（固定流体固定）

回答

相关问题