0

「bbokshelf」を作成しようとしている別の div 内に多数の div があります。「books」の div を下に揃えるために、display:table-cellcss プロパティを使用し、cointainer の幅を 100% に設定していますが、内側の div がコンテナーを満たすと、オーバーフローし始めます。それらを浮かせるなど、行に表示させる方法はありますか? float: left動作しませんでした。HTML:

<div class="magazinebookcase">
    <div class="books">
    <a style="height:286px;width:16px;" href="">
            <div class="rotate">Book 9</div>
    </a>
    </div>
            <div class="books">
    <a style="height:258px;width:48px;" href="">
            <div class="rotate">Book 10</div>
    </a>
    </div>
            <div class="books">
    <a style="height:252px;width:38px;" href="">
            <div class="rotate">Book 11</div>
    </a>
    </div>
            <div class="books">
    <a style="height:254px;width:34px;" href="">
            <div class="rotate">Book 12</div>
    </a>
    </div>
            <div class="books">
    <a style="height:258px;width:36px;" href="">
            <div class="rotate">Book 13</div>
    </a>
    </div>
            <div class="books">
    <a style="height:258px;width:50px;" href="">
            <div class="rotate">Book 14</div>
    </a>
    </div>
            <div class="books">
    <a style="height:254px;width:52px;" href="">
            <div class="rotate">Book 15</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:72px;" href="">
            <div class="rotate">Book 16</div>
    </a>
    </div>
            <div class="books">
    <a style="height:258px;width:38px;" href="">
            <div class="rotate">Book 17</div>
    </a>
    </div>
            <div class="books">
    <a style="height:252px;width:40px;" href="">
            <div class="rotate">Book 18</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:46px;" href="">
            <div class="rotate">Book 19</div>
    </a>
    </div>
            <div class="books">
    <a style="height:284px;width:14px;" href="">
            <div class="rotate">Book 20</div>
    </a>
    </div>
            <div class="books">
    <a style="height:252px;width:42px;" href="">
            <div class="rotate">Book 21</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:44px;" href="">
            <div class="rotate">Book 22</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:44px;" href="">
            <div class="rotate">Book 23</div>
    </a>
    </div>
            <div class="books">
    <a style="height:262px;width:60px;" href="">
            <div class="rotate">Book 24</div>
    </a>
    </div>
            <div class="books">
    <a style="height:284px;width:14px;" href="">
            <div class="rotate">Book 25</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:40px;" href="">
            <div class="rotate">Book 26</div>
    </a>
    </div>
            <div class="books">
    <a style="height:254px;width:58px;" href="">
            <div class="rotate">Book 27</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:40px;" href="">
            <div class="rotate">Book 28</div>
    </a>
    </div>
            <div class="books">
    <a style="height:257px;width:41px;" href="">
            <div class="rotate">Book 29</div>
    </a>
    </div>
            <div class="books">
    <a style="height:258px;width:40px;" href="">
            <div class="rotate">Book 30</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:34px;" href="">
            <div class="rotate">Book 31</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:42px;" href="">
            <div class="rotate">Book 32</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:44px;" href="">
            <div class="rotate">Book 33</div>
    </a>
    </div>
            <div class="books">
    <a style="height:254px;width:40px;" href="">
            <div class="rotate">Book 34</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:40px;" href="">
            <div class="rotate">Book 35</div>
    </a>
    </div>
            <div class="books">
    <a style="height:252px;width:42px;" href="">
            <div class="rotate">Book 36</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:44px;" href="">
            <div class="rotate">Book 37</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:34px;" href="">
            <div class="rotate">Book 38</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:36px;" href="">
            <div class="rotate">Book 39</div>
    </a>
    </div>
            <div class="books">
    <a style="height:252px;width:26px;" href="">
            <div class="rotate">Book 40</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:34px;" href="">
            <div class="rotate">Book 41</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:50px;" href="">
            <div class="rotate">Book 42</div>
    </a>
    </div>
            <div class="books">
    <a style="height:258px;width:48px;" href="">
            <div class="rotate">Book 43</div>
    </a>
    </div>
            <div class="books">
    <a style="height:258px;width:46px;" href="">
            <div class="rotate">Book 44</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:60px;" href="">
            <div class="rotate">Book 45</div>
    </a>
    </div>
        <div class="clearfix"></div>
</div>​

CSS:

.magazinebookcase {
width: 100%;
padding: 3px;
float:left;
} 

.magazinebookcase .clearfix {
clear:both;
}

.magazinebookcase .books {
display: table-cell;
vertical-align: bottom;
text-align:center;
}

.magazinebookcase a {
border: 1px solid #000;
display: block;
font-size: 0.7em;
}

.magazinebookcase a:hover {
background-color: #ccc;
}

.rotate {
-moz-transform: rotate(270deg);
-moz-transform-origin: 50% 50%;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: 50% 50%;
position: relative;
top: 50%;
}​

http://jsfiddle.net/b8K7u/

4

2 に答える 2

2

display: table-cell;試す代わりにdisplay: inline-block;

そのようです。

.magazinebookcase .books {
display: inline-block;
vertical-align: bottom;
text-align:center;
}

http://jsfiddle.net/b8K7u/1/

于 2012-11-05T14:26:41.007 に答える
0

あなたが抱えている問題は、本を狭くするために、狭い幅を使用していることです. ただし、その幅は本のタイトルを持つ要素に継承されます。ただし、その要素は回転後に表示されますが、幅はまだ狭いです。つまり、幅はローカル座標系に相対的です (回転が 90 度の倍数でない場合は、これが唯一の方法です)。

于 2012-11-05T14:30:46.360 に答える