代码之家 › 专栏 › 技术社区 › uzay95

DIV布局:静态左列宽,条纹右列宽

html css

uzay95 · 技术社区 · 15 年前

%19左侧部分宽度,%80内容宽度:

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

如何使用CSS完成此操作?

<html>
&头;
<title>带浮动框的两列液体布局</title>
<style type=“text/css”>
身体
{
利润:0倍;
填料:0px;
}
div
{
边框:1倍纯黑;
}
α标题
{
背景:0f0;
宽度:100%;
}
左撇子
{
背景:f00;
浮动:左;
宽度:19%;
/*最大宽度:200px;*/
高度:500 px;
}
γ含量
{
背景:fff;
浮动:左;
宽度:80%;
高度:500 px;
}
脚注
{
背景:0f0;
清楚:两者;
宽度:100%;
}
&风格/风格;
和/头& GT;
和身体;
<div id=“header”>
标题部分</Div>
<div id=“leftcol”>
左侧部分</Div>
<div id=“content”>
内容部分</Div>
<div id=“footer”>
页脚部分</Div>
和/身体;
& lt//html & gt;
< /代码> <

但是我想把左边的部分固定到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>