如何获得CSS表格到100%的响应式设计
如何获得以下设置与CSS工作?如何获得CSS表格到100%的响应式设计
的jsfiddle
http://jsfiddle.net/16ex38mL/2/
基本上,我打算把一个输入框#头-NAV-内容的搜索,让div和它下面的一个响应调整为100剩余宽度的百分比。 我有两个静态宽度列。一个是240px的第一个,一个是200px的最后一个。
代码
#header-nav-content-search {
width: 100%;
}
没有做的伎俩。
我都集中在减少HTML需要标记。以下示例主要基于您的优秀素描,因此需要进行一些调整。
基本思路
与中心小区剩余流体创建三个“列” CSS表:
<div class="table">
<div class="cell"></div>
<div class="cell center">I contain 4 fluid divs with the class ".inner"</div>
<div class="cell"></div>
</div>
中心单元包含您的4条内盒与类.inner
基本CSS样式
box-sizing: border-box
将允许我们计算百分比宽度包括填充和边框主容器,
.table
,被赋予一个固定的高度(可更换为百分比)的
.inner
的div是display: inline-block
并得到适当的百分比宽度和高度固定等于一半的集装箱高度左,右列赋予他们的固定宽度
.table
给出一个适当的最小宽度以防止内部的div从重叠
注:在HTML标记中,内div的关闭和打开标签具有在它们之间没有空间。这很重要,因为它可以防止内联元素出现间隙。
参考this article for more information.
CSS/HTML /演示
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
}
.table {
display: table;
height: 300px;
width: 100%;
min-width: 600px;
table-layout: fixed;
}
.cell {
display: table-cell;
vertical-align: top;
}
.left {
width: 240px;
}
.right {
width: 200px;
border-left: solid 1px #000;
}
.inner {
display: inline-block;
height: 150px;
vertical-align: top;
}
.center-left {
width: 30%;
}
.center-right {
width: 70%;
}
/* Borders */
.table {
border: solid 1px #000;
}
.inner {
border-bottom: solid 1px #000;
border-left: solid 1px #000;
}
.center-right .inner {
border-right: solid 1px #000;
}
.inner:nth-child(3),
.inner:nth-child(4) {
border-bottom: none;
}
<div class="table">
<div class="cell left">
240px width
</div>
<div class="cell center">
<div class="inner center-left">
30% width 50% height
</div><div class="inner center-right">
70% width 50% height
</div><div class="inner center-left">
30% width 50% height
</div><div class="inner center-right">
70% width 50% height
</div>
</div>
<div class="cell right">
200px width
</div>
</div>
完美答案。我怎么能让内层流体不流动,但内容的宽度如何? – gco 2014-10-02 19:07:43
我不会那样做。这是一个让你开始的方法。
DEMO:http://jsbin.com/faveca/1/
http://jsbin.com/faveca/1/edit
HTML:
<header>
<div class="fixed-width-240 eq">
240px column fixed width what about is it equal to the others, yes it is.
</div>
<div class="fluid eq">
fluid column
</div>
<div class="fixed-width-200 eq">
200px column
</div>
</header>
CSS
body,
html {
margin: 0;
padding: 0;
}
header div,
header div:before,
header div:after {
box-sizing: border-box
}
header {
border: 2px solid #000
}
header:after {
content: "";
display: table;
clear: both;
}
.fixed-width-240 {
z-index: 1;
position: relative;
background: red;
}
.fixed-width-200 {
z-index: 2;
position: relative;
background: orange;
}
.fluid {
position: relative;
z-index: -1;
background: #ccc;
}
@media (min-width:700px) {
header {
overflow: hidden
}
header .eq {
padding-bottom: 99999px;
margin-bottom: -99999px;
}
.fixed-width-240,
.fixed-width-200 {
float: left
}
.fixed-width-240 {
width: 240px;
width: 240px;
margin-right: -240px;
border-right: 2px solid #000;
}
.fixed-width-200 {
float: right;
z-index: 2;
width: 200px;
margin-left: -200px;
border-left: 2px solid #000;
}
.fluid {
float: left;
padding: 0 220px 0 260px;
width: 100%;
}
}
最好的图纸不断:采用微软期刊P – Azrael 2014-10-02 14:19:24
:d ...的边界应该是,即使。 – gco 2014-10-02 14:21:55