Question

我想要3列：侧列80px宽度，中间列其余

我的第一种方法：在页面加载时我计算屏幕宽度减去160px并将此结果分配给中心列的宽度

可以用css自动完成吗？

Answer 1

您可以在中间的一个上使用2个浮动的80px宽的列和左/右边距：

div {
  height: 150px; /* <-- fake height */
}
.col {
  background: teal;
  width: 80px;
  float: left;
}
.center {
  margin: 0 85px; /* <-- width of left/right columns + gutters */
  background: gold;
}
.col.r {
  float: right;

<div class="col"></div>
<div class="col r"></div>
<div class="center"></div>

Answer 2

只需使用float: left;和float: right;作为边，overflow:hidden;作为中间部分。将自动计算中间列的宽度。

<div class="wrapper">
    <div class="left">
    </div>
    <div class="right">
    </div>
    <div class="main">
    </div>
</div>

-

.wrapper {
    width: 800px;
    background: #ff0000;
}

.left {
    float: left;
    width: 80px;
    height: 100px;
    background: red;
}

.right {
    float: right;
    width: 80px;
    height: 100px;
    background: blue;
}


.main {
    height: 100px;
    background: green;
    overflow: hidden;
}

http://jsfiddle.net/skeurentjes/rm8mfcxb/1/

Answer 3

Demo

HTML

<div id="header">
     <h1>Header</h1>
</div>
<div id="page-wrap">
    <div id="main-sidebar">
        <p>Text text</p>
    </div>
    <div id="main-content">
        <p>text text</p>
    </div>
    <div id="secondary-sidebar">
        <p>text text</p>
    </div>
</div>
<div id="footer">
    <p>Footer</p>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font: 15px/2 Georgia, serif;
    background: #999;
    margin:0;
    padding:0;
}
h1 {
    color: white;
    padding: 10px;
}
#page-wrap {
    max-width: 960px;
    min-width: 560px;
    margin: 0 auto;
    position: relative;
    zoom: 1;
}
#header {
    max-width: 960px;
    min-width: 560px;
    background: #222;
    margin: auto 0;
}
#main-content {
    padding: 0 100px;
    background: white;
    min-height:150px;
}
#main-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    bottom: 0;
    background: #ccc;
    padding: 0 10px;
    min-height:150px;
}
#secondary-sidebar {
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
    bottom: 0;
    background: #ccc;
    padding: 0 10px;
    min-height:150px;
}
#footer {
    max-width: 960px;
    min-width: 560px;
    background: #222;
    margin: 0 auto 15px;
}
#footer p {
    padding: 10px;
    color: white;
}

Answer 4

无需动态检查任何内容。

将<table>宽度设置为100％，将'{1}}设置为<td>

table{
    width: 100%;
}
.side{
    width: 80px;
}

http://jsfiddle.net/ecdtaqLo/

三柱网页设计，边宽固定

4 个答案: