我如何添加另一個div來覆蓋.left，.mid和.right右側的所有空間？

Question

您好，我想在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

您可以創建一個帶有2個flex子元素的flex行，並將左flex子元素中的left / mid / right元素設置為您希望它們占據的flex-basis ，然后將另一個flex子元素設置為flex-grow: 1 。 我在這段代碼中使用速記屬性。

 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