使div行为像一个表，而不使用display: table
使div行为像一个表，而不使用display: table
提问于 2014-04-03 11:40:47
标题应该与内容很好地保持一致。
允许一切，只是不使用表元素。
<div style="">
<div style="">
<span class="" >Firstname</span>
<span class="" >Lastname</span>
</div>
<div style="" class="">
<span class="" style=""> Tom </span>
<span class="" style=""> Jones </span>
</div>
<div style="" class="">
<span class="" style=""> Micheal </span>
<span class="" style=""> Jackson </span>
</div>
<div style="" class="">
<span class="" style=""> SomedudewithsuperlongFirstname </span>
<span class="" style=""> SomedudewithsuperlongLastname </span>
</div>
</div>css：
span{
display: inline-block;
min-width: 100px;
}
div div {
min-width: 100px;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2014-04-03 16:12:34
前奏曲
虽然你对使用表格感到厌倦是对的，但是如果你用它们来表示表格数据，那就好了！
但是，正如您正确地说的，它们有相当多的警告；特别是某些浏览器对它们的解释是如何不同的，如您在注释部分的Firefox 4示例中所示。
虽然我认为上述的一些问题可以通过CSS 表格样式、黑客和解决办法来克服，但我认为这不值得麻烦或开销。
如果您对HTML或CSS表样式不满意，我们可以模拟一些<table>属性。
<div id="container">
<div class="children">
<p><span>Firstname</span></p>
<p><span>Tom</span></p>
<p><span>SomedudewithsuperlongFirstname</span></p>
</div>
<div class="children">
<p><span>Lastname</span></p>
<p><span>Jones</span></p>
<p><span>SomedudewithsuperlongLastname</span></p>
</div>
</div>CSS
#container{
display: block;
border: 1px dashed #ccc;
width: 500px;
margin: 0 auto;
}
.children{
display: inline-block;
padding: 10px;
vertical-align: top;
}
.children > p > span{
vertical-align: middle;
}Stack Overflow用户
发布于 2014-04-03 11:48:08
如果你在你的电视上寻找相同的宽度，那么最小宽度可能不是你要走的路。这只会确保元素的宽度最小。如果一个“单元格”中的内容超过这个值，它们就不会对齐。
也许可以试试宽度而不是最小宽度？或者更大的最小宽度
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22847398
复制相关文章
点击加载更多
相似问题
使用display:table -不包含display:table
无法使用display:table使div居中对齐
使embed行为像div
div{display:table;}不扩展div以适应图像
如何在使用<display:table> &<display:column>时使表行可单击
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
