如何讓CSS指示元素相互顯示？

Question

我對此很新穎，所以我對這個稍微模糊的問題表示歉意。但這裏是所有的信息。我正在爲學校開設一個「網站」。我希望我的佈局在左側顯示爲一個菜單類型的東西，右側有兩個不同的按鈕，出現在另一個上方。我附上了一張圖片，以防萬一，這是沒有意義的。當我float:right，它接近我想要它，但不完全。元素最終出現在右下角。我如何讓他們做我想讓他們做的事情？元件佈局
first
second

Answer 1

我不知道正確的理解，但是當你說一個比另外一個我想你想說一個對的另一個上面。

讓我知道如果我在正確的道路:)

檢查這個fiddle。

HTML

<div id="container"> 
    <div id="left-sidebar"> 
    <ul> 
     <li>home</li> 
     <li>about</li> 
    </ul> 
    </div> 
    <div id="main"> 
    <div id="box"> 
     <p>This is a box</p> 
    </div> 
    <button>Button 1</button> 
    <button>Button 2</button> 
    </div> 
</div> 

CSS

#container {height: 100%;} 
#left-sidebar { 
    width: 120px; 
    height: 400px; 
    float: left; 
    background: red; 
} 
ul { margin-top: 20px; color: white;} 
#main { 
    width: calc(100% - 120px); 
    height: 400px; 
    background: green; 
    float: left; 
} 
#box{ 
    height: 100px; 
    width: 100px; 
    background: white; 
    padding: 20px; 
    margin: 20px; 
    float: left; 
} 
button { 
    display: block; 
    margin: 20px; 
} 

我希望這有助於。

Answer 2

這可能是一個開始，根據您的圖像草圖。

.containter { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.middle { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex: 1; 
 
} 
 
.left { 
 
    flex: 1; 
 
} 
 
.right { 
 
    flex: 0 0 200px; 
 
} 
 

 
.top { 
 
    height: 60px; 
 
    border: 1px solid #999; 
 
} 
 
.menu { 
 
    width: 100px; 
 
    height: 150px; 
 
    border: 1px solid #999; 
 
} 
 
.button { 
 
    width: 100px; 
 
    height: 40px; 
 
    border: 1px solid #999; 
 
} 
 
.bottom { 
 
    height: 60px; 
 
    border: 1px solid #999; 
 
}

<div class="container"> 
 
    <div class="top"> 
 
    Top 
 
    </div> 
 
    <div class="middle"> 
 
    <div class="left"> 
 
     <div class="menu">Menu</div> 
 
    </div> 
 
    <div class="right"> 
 
     <div class="button">Button</div> 
 
     <div class="button">Button</div> 
 
    </div> 
 
    </div> 
 
    <div class="bottom"> 
 
    Bottom 
 
    </div> 
 
</div>