CSS

时间:2015-09-29 05:58:52

标签: html css

我有以下设置

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。谁能解释一下这里发生了什么?

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

2 个答案:

答案 0 :(得分:1)

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

一样
table{
     padding:1px;
}

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

答案 1 :(得分:0)

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

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