显示表单元格溢出 [英] Div overflow with display table-cell
本文介绍了显示表单元格溢出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一些div在另一个div试图做一个bbokshelf。为了使booksdivs底部对齐，我使用 display：table-cell css属性，cointainer宽度为100％，但是当内部div填充容器，它们开始溢出。有没有办法让它们出现在行，如浮动他们或什么？ float：left 没有工作。
HTML：
I have a number of divs inside another div trying to make a "bbokshelf". In order to align the "books" divs bottom, I'm using the display:table-cell css property, and the cointainer width at 100%, but when the inside divs fills the container, they start overflowing. Is there a way to make them appear in rows, like floating them or something? float: left did not work.
The 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%;
}
推荐答案
而不是 display：table-cell; 尝试 display：inline-block;
这样。
.magazinebookcase .books {
display: inline-block;
vertical-align: bottom;
text-align:center;
}
这篇关于显示表单元格溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
