使旁邊的兩個盒子始終具有相同的高度

Question

我對一切都很陌生，正在努力實現 header，2 個不同寬度的框和一個頁腳。 一切都在一起，但我需要這樣做，所以當框中的內容發生變化時，高度始終保持不變。

我已經嘗試實施 flexbox 但無法使其工作。 我不允許在這個項目上使用溢出。 我應該盡可能多地使用花車！

我想獲得像我附在此處的這張照片的外觀：在此處輸入圖片描述

`

<body>
       <div class="wrapper">
        <header><h1>Hej Header</h1></header>
            <nav>
                <div class="box">
                    <div class="box-row">
                        
                    <section id="s1"><h1>Här är sektion nummer ett</h1></section>
                    <h1 class="rubrik1">Högskolan Nivå 1</h1>
                    <p id="p1"> Zombie <a href="images/dollar.png">zombies</a> ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. </p>
            
                    <h2 class="rubrik2">Rubrik 2</h2>
                    <p id="p2"> Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. </p>
            
                    <h3 class="rubrik3">Rubrik 3</h3>
                    <p id="p3"> Zonbi asdasdasdadasdasdas asd asdasdasd a das dasd as dasd as das dtattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead. </p></nav>
                
                    <section id="s2"><h2>Här är sektion nummer två</h2></section>
                </div>
                <footer><h1>Hej Footer</h1></footer>
            </nav>
        </div>
        </body>

`

我的CSS：

`

@font-face { 
    font-family: MuseoSans; src: url('fonts/MuseoSans_500.otf'); 
    font-family: MuseoSans; src: url('fonts/MuseoSans_500.ttf');
    font-family: RobotoCondensed; src: url('fonts/RobotoCondensed-Italic.ttf'); 
}



* {
    background-color:#eee;
}

p {
    font-family:Helvetica, Arial, Sans-serif;
    color:#222;
    font-size:14px;
}

.rubrik1 {
    font-family: MuseoSans, helvetica, sans-serif;
    color:#009;
    font-size:28px;
}
.rubrik2{
    font-family: RobotoCondensed, helvetica, sans-serif;
    color:#009;
    font-size:16px;
}

.wrapper {
    float: left;
    max-width:960px;
    width:960px;
    background-color: white;
    border-width:1;
    border-style: solid;
    border-color:#ccc;
}

header {
    border-style:double;
    height: 140px;
}

footer {
    border-style:double;
    height:200px;
    float: left;
    width: 954px;
}

nav{
    float:left;
    padding:12px;
    border-style: double;
    width: 600px;
    
}

#s2{
    float: left;
    border-style:double;
}

`

我已經嘗試實施 flexbox 但無法使其工作。 我不允許在這個項目上使用溢出。 我應該盡可能多地使用花車！

Answer 1

也許這個簡單的 Flexbox 布局可能有助於作為起點？ 根據所需的布局圖像，它似乎非常接近地復制了它。 nav元素似乎包含不真正構成導航的內容，因此被刪除但可以輕松插入 LHS 部分或 header？

 body { width: 100%; height: 100vh; margin: 0; padding: 0; } #wrapper { display: flex; flex-direction: column; width: 80%; height: 100vh; margin: 0 auto; } header,main,footer,main>section { display: flex; margin: 0; border: 1px solid rgba(133, 133, 133, 0.5); } header { flex: 2; order: 1; align-items: center; justify-content: center; } main { flex: 10; order: 2; } footer { flex: 1; order: 3; align-items: center; justify-content: center; } main>section:nth-of-type(1) { flex: 10; order: 1; } main>section:nth-of-type(2) { flex: 4; order: 2; } /* ONLY for visually identifying elements */ header { background: azure } main { background: yellow } footer { background: pink } main>section:nth-of-type(1) { background: rgba(0, 255, 0, 0.25); } main>section:nth-of-type(2) { background: rgba(255, 0, 0, 0.25); }

 <div id='wrapper'> <header>#header#</header> <main> <section>#LHS-Large#</section> <section>#RHS-Small#</section> </main> <footer>#footer#</footer> </div>

使旁邊的兩個盒子始終具有相同的高度

問題描述

1 個解決方案

解決方案1
0 已采納 2022-11-25 17:46:05

使旁邊的兩個盒子始終具有相同的高度

問題描述

1 個解決方案

解決方案1 0 已采納 2022-11-25 17:46:05

解決方案1
0 已采納 2022-11-25 17:46:05