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

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