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

Question

Hello there i want to add one more div on the right side of 3 divs ie left, right and mid, i am new to CSS, also if you could then please also explain how to position complex div designing, or please share a link to resource which elaborates this concept easily Here is my complete source code.. Here is the output 您好，我想在3个div的右侧添加一个div，即left，right和mid，我是CSS新手，如果可以的话，还请解释如何定位复杂的div设计，或者共享一个链接到轻松阐述这个概念的资源这是我完整的源代码。这是输出

<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

You can create a flex row with 2 flex children and put the left/mid/right elements in the left flex child set to the flex-basis you want those to occupy, then set the other flex child to flex-grow: 1 . 您可以创建一个带有2个flex子元素的flex行，并将左flex子元素中的left / mid / right元素设置为您希望它们占据的flex-basis ，然后将另一个flex子元素设置为flex-grow: 1 。 I'm using the shorthand properties in this code. 我在这段代码中使用速记属性。

 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; }

 <div class="top"> <p>Top</p> </div> <div class="flex"> <div class="panel panel1"> <div class="left"> <p>Left</p> </div> <div class="mid"> <p>Mid</p> </div> <div class="right"> <p>Right</p> </div> </div> <div class="panel panel2"> foo </div> </div> <div class="bottom"> <p>Bottom</p> </div>

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

问题描述

1 个解决方案

解决方案1
0 2017-05-26 18:34:43

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

问题描述

1 个解决方案

解决方案1 0 2017-05-26 18:34:43

解决方案1
0 2017-05-26 18:34:43