简单CSS版式设计

Question

大家好，我正在学习 css 布局，在非常非常简单的布局中遇到问题 design.I 只是位于左侧的一列和其余内容。谢谢！！

<!DOCTYPE html>
<html>
<head>
    <title> Practicing </title>
    <style type="text/css">
    #leftLayer{
        width: 25%;
        height: 100%;
        float: left;
        background-color: orange;

    }
    #section{
        margin-left: 100px;
        background-color: red;
        height: 100%;

    }
    </style>
</head>
<body>
<div id="leftLayer"></div>
<div id="section"></div>

</body>
</html>

Answer 1

height:100% 属性正确地向您显示 div 中包含的文本行的 100% 高度。

如果你想用display:block定义一个块；并定义 height:500px;那么你将有一个预定高度的块，你可以 float:left;下一列然后加入它。左边距：100px；不需要。

试试这个：

<!DOCTYPE html>
<html>
<head>
    <title> Practicing </title>
    <style type="text/css">

    #leftLayer{
        width: 25%;
        float: left;
        background-color: orange;
    }
    .section {
        display:block;
        height:50em;
    }
    #section{
        background-color: red;
    }
    </style>
</head>
<body>
<div id="leftLayer" class="section"> content </div>
<div id="section" class="section"> larger content </div>

</body>
</html>

简单CSS版式设计

Simple CSS Layout design

html

css

layout