對齊4 div與父div中的百分比尺寸

Question

我該如何做到這一點？

HTML代碼：

<div class="inset"> 
    <div class="innerWrapper"> 
     <div class="uncollapse"> 
     </div> 
     <div class="featuredbox"> 
     <div class="rank"></div> 
     <div class="banner"></div> 
     <div class="desc"></div> 
     <div class="votes"></div> 
     </div> 
    </div> 
</div> 

CSS代碼：

@charset "utf-8"; 

.featuredbox { 
    background-color: #f8f8f8; 
    height: 160px; 
    width: 100%; 
    border: 1px solid #d5d5d5; 
    margin-top: 10px; 
    -webkit-box-shadow: 0px 0px 4px 1px #d8d8d8; 
    box-shadow: 0px 0px 4px 1px #d8d8d8; 
    padding-top: 15px; 
    padding-bottom: 10px; 
} 

.featuredbox .rank { 
    color: #8f8f8f; 
    width: 10%; 
    height: 100%; 
} 

.featuredbox .banner { 
    width: 80%; 
    height: 50%; 
} 

.featuredbox .desc { 
    width: 80%; 
    height: 50%; 
} 

.featuredbox .votes { 
    width: 10%; 
    height: 100%; 
} 

What it should look like http://puu.sh/49szH.png

我該怎麼做才能讓他們在特定的格式排列，而無需使用固定的值？

謝謝！

它要求我把更多的細節，但我沒有任何更多的給:(

Answer 1

只是把這個CSS你html的

.featuredbox { 
    background-color: #f8f8f8; 
    height: 160px; 
    width: 100%; 
    border: 1px solid #d5d5d5; 
    margin-top: 10px; 
    -webkit-box-shadow: 0px 0px 4px 1px #d8d8d8; 
    box-shadow: 0px 0px 4px 1px #d8d8d8; 
    padding-top: 15px; 
    padding-bottom: 10px; 
} 
.featuredbox div{ 
    float:left; 
} 
.featuredbox .rank { 
    color: #8f8f8f; 
    width: 10%; 
    height: 100%; 
} 

.featuredbox .banner { 
    width: 80%; 
    height: 50%; 
} 

.featuredbox .desc { 
    width: 80%; 
    height: 50%; 
} 

.featuredbox .votes { 
    width: 10%; 
    height: 100%; 
    top:-50%; 
    position:relative; 
} 

Answer 2

嗯，有你正在尋找在這裏的幾個問題。

首先，我刪除高度：160px規則

接下來，您需要認識到，通過向特色框添加邊框，您將在該框的寬度上添加2px所以除非您使用框大小：border-box在你的CSS中，你基本上說特色框是100％寬加2px。

然後，您需要浮動：將每個框留在特色框內。再次，從這些箱子中取出高度。

你會發現，如果盒子裏充滿了內容，你不知道它將佔用多少空間，那麼你可能會發現，如果內容太長，可能會從內容中刪除內容。刪除高度將允許框根據其包含的內容在高度上增長。

最後，您需要清除特色框上的浮動。有幾個方法可以做到這一點，但做到這一點的最新方法是：

http://nicolasgallagher.com/micro-clearfix-hack/

此外，你應該更多有關如何使用浮動框位置讀取了，因爲現在（直到Flexbox的準備使用），這是做到這一點的最佳方式。

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Answer 3

更改HTML代碼位。創建了三個主要的div（左，middile一個有兩個孩子，右）

HTML代碼：

<div class="inset"> 
    <div class="innerWrapper"> 
     <div class="uncollapse"> 
     </div> 
     <div class="featuredbox"> 
     <div class="rank">Rank</div> 
     <div class="middileDiv"> 
     <div class="banner">Banner</div> 
     <div class="desc">Desc</div> 
      </div> 
     <div class="votes">Votes</div> 
     </div> 
    </div> 
</div> 

CSS代碼：

@charset "utf-8"; 

.featuredbox { 
    background-color: #f8f8f8; 
    height: 160px; 
    width: 100%; 
    border: 1px solid #d5d5d5; 
    -webkit-box-shadow: 0px 0px 4px 1px #d8d8d8; 
    box-shadow: 0px 0px 4px 1px #d8d8d8; 
} 

.featuredbox .rank { 
    color: #8f8f8f; 
    width: 10%; 
    height: 100%; 
    float:left; 
} 

.featuredbox .banner { 
    width: 80%; 
    height: 50%; 
} 

.featuredbox .desc { 
    width: 80%; 
    height: 50%; 
} 

.featuredbox .votes { 
    width: 10%; 
    height: 100%; 
    float:left; 
} 

.middileDiv { 
    color: #8f8f8f; 
    width: 80%; 
    height: 100%; 
    float:left; 
} 

DEMO：

http://jsfiddle.net/RvAwB/1/