Question

你好我想在3个div的右侧添加一个div，即左，右和中，我是CSS的新手，如果你还可以请解释如何定位复杂div设计，或请分享资源链接，轻松阐述这一概念这是我的完整源代码.. Here is the output

<html>
    <head>
        <title>Template</title>
        <style>
            body {
                background-color: black;
            }

            .top, .left, .right, .mid, .bottom {
                margin: 5px;
                background-color: plum;
                padding: 5px;
            }

            .left, .right, .mid {
                width: 30%;
            }
        </style>
    </head>

    <body>
        <div class="top">
            <p>Top</p>
        </div>

        <div class="left">
            <p>Left</p>
        </div>

        <div class="mid">
            <p>Mid</p>
        </div>

        <div class="right">
            <p>Right</p>
        </div>

        <div class="bottom">
            <p>Bottom</p>
        </div>
    </body>
</html>

Answer 1

您可以创建一个包含2个flex子元素的弹性行，并将左侧/中/右元素放在左侧的flex子集中，并将其设置为您想要占用的flex-basis，然后将另一个flex子元素设置为{{ 1}}。我在这段代码中使用了速记属性。

＆＃13;

flex-grow: 1

＆＃13;

body {
  background-color: black;
}

.top,
.left,
.right,
.mid,
.bottom,
.panel2 {
  margin: 5px;
  background-color: plum;
  padding: 5px;
}

.flex {
  display: flex;
}
.panel1 {
  flex: 0 0 30%;
}
.panel2 {
  flex: 1 0 0;
  background: blue;
}

＆＃13;

如何添加另一个div，它将覆盖.left，.mid和.right右侧的所有空间？

1 个答案: