0

親 DIV にネストされた 10 セットの DIV があります。

<div id="bar_block">
    <div class="bar bar1"></div>
    <div class="bar bar2"></div>
    <div class="bar bar3"></div>
    <div class="bar bar4"></div>
    <div class="bar bar5"></div>
    <div class="bar bar6"></div>
    <div class="bar bar7"></div>
    <div class="bar bar8"></div>
    <div class="bar bar9"></div>
    <div class="bar bar10"></div>
</div>

私はこれまでこのCSSを使用してきました：

#bar_block {
    width:350px;
    height:75px;
}

.bar {
    border:1px solid #000;
    width:8%;
    float:left;
    margin-right:5px;
}

.bar1 {
    height:10%;
}

.bar2 {
    height:20%;
}

.bar3 {
    height:30%;
}

.bar4 {
    height:40%;
}

.bar5 {
    height:50%;
}

.bar6 {
    height:60%;
}

.bar7 {
    height:70%;
}

.bar8 {
    height:80%;
}

.bar9 {
    height:90%;
}

.bar10 {
    height:100%;
    margin:0;
}

すべてのバーを左下にフロートさせたかったのです。すべてのバーが一緒に窮屈になるため、絶対位置は機能しませんでした。何か案は？

4

1 に答える 1

1

コンテナとdivのCSSを次のように変更してみてください。

#bar_block {
    width:360px;
    height:75px;
    position:relative;
}

.bar {
    border:1px solid #000;
    width:24px;
    bottom:0;
    display:inline-block;
    margin-right:2px;
}

インラインブロックを下部とピクセル幅と組み合わせて使用​​する必要があります。

jsFiddleの例。

于 2012-06-05T03:15:32.760 に答える