html - 将 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

稍微更改了 HTML 代码。创建了三个主要 div(左，中间一个有两个 child 和右)

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;
}

演示:

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