（HTML）（CSS）為什么我的多列布局的左側顯得比另一側小？

Question

通過jsfiddle鏈接，我試圖使“ div class ='main_content'”與“ div class ='sidebar'”的垂直高度相同。 如何做到這一點？ 如果您無法加載小提琴或格式太糟，這是我的代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>My project</title>
    <style>

        body {
            background-color: #5A4E3C;
            color: #E9EBBF;
        }

        header {
            background-color: #D8E472;
            padding: 2%;
        }

        nav {
            background-color: #D8E472;
        }

        footer {
            background-color: #D8E472;
            padding: 2%;
            color: #5A4E3C;
        }   

        h1 {
            color: #5A4E3C;
        }

        li {
            display: inline-block;
        }

        nav > ul {
            margin-top: 0;
            margin-bottom: 0;
        }

        .wrapper {
            width: 85%;
            background-color: #418E8E;
            margin: 0 auto;
        }

        .main_content {
            width: 56%;
            padding: 2%;
            column-count: 1;
            float: left;
            background-color: #418E8E;
            margin: 0;
        }

        .sidebar {
            width: 36%;
            padding: 2%;
            column-count: 1;
            float: left;
            background-color: #418E8E;
        }

    </style>
</head>
<body>

        <div class='wrapper'>

        <header>
            <h1>Main Heading</h1>
        </header>

        <nav>
            <ul>
                <li><a href='1.html'>Page 1</a></li>
                <li><a href='2.html'>Page 2</a></li>
            </ul>
        </nav>

        <div class='main_content'>
            <article>
                <h2>Subhead</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </article>
        </div>

        <div class='sidebar'>
            <article>
                <h2>Subhead</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </article>
        </div>

    <footer>
        &copy Yazen 2018.
    </footer>

    </div>

</body>
</html>

對不起，如果有任何混淆.//////////////////////////////////////////// ////////////////////////////////////////

Answer 1

您可以將元素包裝在新標記中（我已經使用過section ）並添加display: flex 。

 body { background-color: #5A4E3C; color: #E9EBBF; } header { background-color: #D8E472; padding: 2%; } nav { background-color: #D8E472; } footer { background-color: #D8E472; padding: 2%; color: #5A4E3C; } h1 { color: #5A4E3C; } li { display: inline-block; } nav>ul { margin-top: 0; margin-bottom: 0; } .wrapper { width: 85%; background-color: #418E8E; margin: 0 auto; } .main_content { width: 56%; padding: 2%; column-count: 1; float: left; background-color: #418E8E; margin: 0; } .sidebar { width: 36%; padding: 2%; column-count: 1; float: left; background-color: #418E8E; } section { display: flex; }

 <div class='wrapper'> <header> <h1>Main Heading</h1> </header> <nav> <ul> <li><a href='1.html'>Page 1</a></li> <li><a href='2.html'>Page 2</a></li> </ul> </nav> <section> <div class='main_content'> <article> <h2>Subhead</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> </div> <div class='sidebar'> <article> <h2>Subhead</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> </div> </section> <footer> &copy Yazen 2018. </footer> </div>

（HTML）（CSS）為什么我的多列布局的左側顯得比另一側小？

問題描述

1 個解決方案

解決方案1
0 已采納 2018-02-21 02:41:13

（HTML）（CSS）為什么我的多列布局的左側顯得比另一側小？

問題描述

1 個解決方案

解決方案1 0 已采納 2018-02-21 02:41:13

解決方案1
0 已采納 2018-02-21 02:41:13