Question

我已经看到有几个与此问题类似的问题，但是似乎都无法解决我的问题。

我想要一个非常简单的设计：两个或多个div相互叠放，每个div停靠在右侧。我正在练习一个不允许使用float属性的测试。

body{
        width:900px;
        height:850px;
        margin-left:auto;
        margin-right:auto;
    }
    
    #header{
        width:900px;
        height: 225px;
        position: absolute;
        right:0px;
        border:1px solid black;
    }
    
    #cen{
        width: 900px;
        height: 240px;
        position: absolute;
        right:0px;
        border:1px solid orange;
    }

<!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
        
            <title></title>
            <link rel="stylesheet" type="text/css" href="main.css" />
        
        </head>
        <body>
            
            <div id="header">
        
            </div>
        
            <div id="cen">
        
            </div>
        
        </body>
        </html>

现在，当我只有一个div（页眉）时，此方法有效，它已正确对接。但是，当我添加'cen'div时，它也停靠在右边，但是它没有经过'header'div下方，而是经过了它。

有什么办法解决这个问题吗？

谢谢。

Answer 1

绝对元素不会表现得体面，不会打扰任何方式。

由于元素标头具有高度，因此可以通过给top:"whatever the height the header is"

添加cen元素。

此处标头的高度为225px

将cen堆叠在top: 255px的位置，使其位于标题的下方。

尝试一下...

*{box-sizing:border-box;}
body{
    width:900px;
    height:850px;
    margin-left:auto;
    margin-right:auto;
}

#header{
    width:900px;
    height: 225px;
    position: absolute;
    right:0px;
    border:1px solid black;
    top:0;
}

#cen{
    width: 900px;
    height: 240px;
    position: absolute;
    right:0px;
    top:225px;
    border:1px solid orange;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <title></title>
    <link rel="stylesheet" type="text/css" href="main.css" />

</head>
<body>

    <div id="header">

    </div>

    <div id="cen">

    </div>

</body>
</html>

Answer 2

静态放置的块元素（divs）将像您默认描述的那样堆叠。因此，不需要绝对定位。

此外，由于以下原因，无需设置宽度：

块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。

body {
  width: 900px;
  margin-left: auto;
  margin-right: 0;
}

#header {
  height: 225px;
  border: 1px solid black;
}

#cen {
  height: 240px;
  border: 1px solid orange;
}

<div id="header">

</div>

<div id="cen">
</div>

Answer 3

您可以使用flexbox这样的内容：

    .container {
        width:100vw;
        display:flex;
        justify-content: flex-end;
    }
    .column {
        display: flex;
        flex-direction:column;
        flex-basis:33%;
    }
    .row {
        display: flex;
        background-color: red;
        width: 100%;
        flex-grow: 1;
        height: 100px; /* can be whatever you like */
        margin: .25rem;
    }

    <div class="container">
        <div class="column">
            <div class="row"></div>
            <div class="row"></div>
            <div class="row"></div>
        </div>

    </div>

CSS Grid可能会更好地工作，但是我做得还不够。

Divs停靠，没有浮动

3 个答案: