如何在不使用邊緣頂尖黑板的情況下製作側板？

Question

float和display: inline-block的概念在製作側板時很難理解。

在一個完美的世界，我想我的這個藍圖是我的網站設計：

我達到了設計;但是當我嘗試添加新的東西時，我注意到，我用更多的CSS hack創建了一個混亂（使用了大量的margin-left，right，top和bottom）來幫助我的可怕黑客 - 並最終浪費了我的開發因爲一些黑客無法在所有瀏覽器上運行。

不管怎麼說，儘量避免邊距頂部/底部的黑客，這是我的嘗試是使側面板：

https://jsfiddle.net/p367aL8w/1/

在這個例子中我的思維過程是給每個小組一個display inline-block;財產，而一直推到右邊，這樣他們可以走到一邊。雖然這不起作用。什麼是正確的方法來做到這一點？ （我真的不喜歡使用彈性盒）。

Answer 1

我喜歡在DOM簡單的修改，這將解決與任何瀏覽器特定的CSS黑客的所有問題。只需爲三個側面板小部件添加一個容器，然後將該容器與右側對齊。請參考下面

#mainpanel{ 
 
    height: 500px; 
 
    width: 65%; 
 
    background-color: #aaa; 
 
    float: left; 
 
} 
 

 
#sidepanel{ 
 
    width: 30%; 
 
    background-color: white; 
 
    float: right; 
 
} 
 

 
.sidepanel01, .sidepanel02, .sidepanel03{ 
 
    width:100%; 
 
    height:100px; 
 
    float:left; 
 
    background: #aaa; 
 
    margin-bottom: 20px 
 
}

<div id="mainpanel"> 
 
Main panel 
 
</div> 
 
<div id="sidepanel"> 
 
    <div class="sidepanel01"> 
 
    Panel1 
 
    </div> 
 

 
    <div class="sidepanel02"> 
 
    Panel2 
 
    </div> 
 

 
    <div class="sidepanel03"> 
 
    Panel3 
 
    </div> 
 
</div>

Answer 2

我很喜歡的flex基於設計的簡單性和避免在float除了元件，諸如定位周圍的圖像的文本的流動簡單串聯的所有費用。

請參閱下面的flex解決方案。 CSS grids也提供了一個很好的解決方案。

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.wrapper .main-panel { 
 
    flex: 1 1 auto; /* shorthand for flex-grow flex-shrink flex-basis */ 
 
    width: 100%; 
 
    height: 300px; 
 
    border: 2px solid red; 
 
} 
 

 
.wrapper .side-panel { 
 
    flex: 0 0 auto; 
 
    width: 200px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.wrapper .side-panel > div { 
 
    flex: 0 0 auto; 
 
    width: 100%; 
 
    height: 100px; 
 
    border: 2px solid red; 
 
}

<div class="wrapper"> 
 
    <div class="main-panel">Main panel</div> 
 
    <div class="side-panel"> 
 
    <div class="side-panel-item">Panel 1</div> 
 
    <div class="side-panel-item">Panel 2</div> 
 
    <div class="side-panel-item">Panel 3</div> 
 
    </div> 
 
</div>