Question

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

<!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

高度：100％属性正确显示div中包含的文本行高度的100％。

如果要使用display：block定义块;并定义高度：500px;那么你将有一个预定高度的块，你可以漂浮：左;然后下一列加入它。保证金左：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布局设计

1 个答案: