我有以下设置
http://codepen.io/anon/pen/WQoqrz
占位符(灰色图像)代表国旗。标志有不同的比例,所以我将高度设置为100%,宽度设置为auto,然后我将行中的下一个元素(表格)设置为行的剩余(动态)宽度。
这是一个奇怪的部分:
.player-card td, .player-card th{
/*width can be any value 1-13%*/
width:13%;
height:19px;
vertical-align:middle;
text-align:center;
border:2px solid #FFD200;
vertical-align:middle;
}
出于某种原因,如果宽度设置为大于13%的任何值,则表格将不占用剩余宽度。有四个示例div。谁能解释一下这里发生了什么?
我为正在发生的令人困惑的魔法数字和边界设置道歉。奇怪的颜色和明显缺失的部分是从我的文件中删除它的结果。
答案 0 :(得分:1)
这种情况正在发生,因为您在开始时为所有事情写了css
。
只需从中删除table
,然后为table
写css
,就像
table{
padding:1px;
}
填充你可以写出你想要的任何价值。 现在它对我来说很好。我认为它应该可以解决你的问题。
答案 1 :(得分:0)
我想出了一个解决方案。这是一个基于另一个类似问题小提琴的小提琴。
div.something { float: left; height: 30px; }
div.fill {
font-size:0px;
height: 30px;
float: none;
overflow: hidden;
background: #390; }
.fiddy{
font-size:12px;
display:inline-block;
width:50%;
height:10px;
background:blue;
text-align:center;
}
放弃桌子。 css仍然非常敏感,不像我希望的那么清晰。
font-size:0只是让fiddy的50%宽度内联块按预期分割(替代方法是删除html中的空格)。