float的垂直对齐方式:left div's
我有大约 10 个宽度相等但高度不同的 div,我希望它们尽可能紧密地组合在一起。
当设置为向左浮动时,它们不会垂直彼此对齐,而是与上面“行”的底部对齐。
我在下面模拟了一个小例子,想要去掉空白。您有什么建议吗?我仅限于使用这种格式,因为内容是外部交付的。
干杯
<div style="width:500px;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left;"></div>
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
</div>
I have about 10 div's of equal widths but varying height and I want them to fit together as tight as possible.
When set to float left they do not line up to each other vertically but instead are aligned to the bottom of the "row" above.
I've mocked up a little example below and want to get rid of the white space. Do you have any suggestions. I'm limited to using this format because the content that is delivered externally.
Cheers
<div style="width:500px;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left;"></div>
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
尝试将第一个向左浮动,然后将下一个向右浮动,下一个向左浮动,下一个向右浮动......
编辑-回应评论。
如果您知道您将获取的
span
的最大数量(并假设它不比您所说的 10 个多得多(因为此方法可能会很快变得非常混乱),并假设 CSS3 是不是您可以尝试这样的选项,您需要不断添加
span+span+...
直到达到您将拥有的连续最大数量。只匹配八个。所以这不是最漂亮的方法!Try floating the first one left, then next one right, the next one left, and the next one right ....
EDIT - In response to comments.
If you know the maximum number of
span
's that you will ever fetch (and assuming it's not much more than the 10 you stated (as this method could get very messy very fast), and assuming CSS3 is not an option you could try something like this,You'd need to keep adding
span+span+...
's until you've reached the maximum number of consecutive ones you will ever have. The above only matches eight. So it's not the prettiest method!您的场景可能需要更多说明。
如果它们始终相同的高度,您可以对它们的排列进行硬编码。修复你的模型:
但这非常明显,可能对你没有帮助,因为它们可能具有不确定的随机高度。在这种情况下,由于它们始终具有相同的宽度,并且您始终有 10 个,因此您可以将它们分成 3 或 4 个垂直堆叠,然后使每个堆叠彼此齐平。
Your scenario could use more clarification.
If they are always the same height, you can hard code their arrangement. To fix your mockup:
But that's pretty obvious and probably doesn't help you because they probably have indeterminably random heights. In that case, since they're always the same width and you always have 10 of them, you can group them in vertical stacks of 3 or 4, and then make each stack flush with one another.