Question

我有以下设置

占位符（灰色图像）代表国旗。标志有不同的比例，所以我将高度设置为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。谁能解释一下这里发生了什么？

我为正在发生的令人困惑的魔法数字和边界设置道歉。奇怪的颜色和明显缺失的部分是从我的文件中删除它的结果。

Answer 1

这种情况正在发生，因为您在开始时为所有事情写了css。只需从中删除table，然后为table写css，就像

一样

table{
     padding:1px;
}

填充你可以写出你想要的任何价值。现在它对我来说很好。我认为它应该可以解决你的问题。

Answer 2

我想出了一个解决方案。这是一个基于另一个类似问题小提琴的小提琴。

http://jsfiddle.net/ux4L4n74/

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中的空格）。

CSS

2 个答案: