Question

％19左截面宽度，％80内容宽度：

alt text

但是我想将左侧部分修复为200px，内容部分是可视区域宽度的其余部分。

我如何用CSS做到这一点？

<html>
<head>
    <title>TWO-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
    <style type="text/css">
        body
        {
            margin: 0px;
            padding: 0px;
        }
        div
        {
            border: 1px solid black;
        }
        #header
        {
            background: #0f0;
            width: 100%;
        }
        #leftcol
        {
            background: #f00;
            float: left;
            width:19%;
            /* max-width: 200px; */ 
            height: 500px;
        }
        #content
        {
            background: #fff;
            float: left;
            width: 80%;
            height: 500px;
        }
        #footer
        {
            background: #0f0;
            clear: both;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="header">
        Header Section</div>
    <div id="leftcol">
        Left Section</div>
    <div id="content">
        Content Section</div>
    <div id="footer">
        Footer Section</div>
</body>
</html>

Answer 1

有很多现成的模板可供使用，例如：

Answer 2

看看：http://www.brunildo.org/test/lf100r.html

Div Layout：静态左列宽度，strechacle右列宽度

2 个答案: