html - 用于呈现表格数据的标记和 CSS

Question

我有以下“表”：

我希望蓝色块具有特定宽度，黄色块根据容器宽度扩展以填充其余空间。

我目前的方法是让每一行的每个块都向左浮动，我给它们特定的宽度，但这种方法不可扩展且不响应。

你能建议我一个更好的方法来实现我想要实现的目标吗？

我还做了一个提琴手，所以你可以玩标记，看看我做了什么。

http://jsfiddle.net/RickyStam/bG4dA/

下面是我的 HTML

<div class="iframe-container">
            <div class="content">
                <div class="betcontainer">
                    <p class="bettitle">Match Outcome</p>
                    <div class="betheaderwrap"><span class="betheader">Away</span><span class="betheader">Draw</span><span class="betheader">Home</span></div>
                    <div class="clear"></div>
                    <div><span class="bettext-big">TEAM A v TEAM B</span><span class="bet">3.30</span><span class="bet">3.30</span><span class="bet">2.15</span></div>
                    <div class="clear"></div>
                </div>
                <div class="seperatebets"></div>
                <div class="betcontainer">
                    <p class="bettitle">Goal</p>
                    <div><span class="bettext-medium">Over 2.5</span><span class="bet">2.05</span><span class="bettext-medium">Over 2.5</span><span class="bet">1.70</span></div>
                    <div class="clear"></div>
                </div>
                <div class="betcontainer">
                    <p class="bettitle">1st Half</p>
                    <div class="betheaderwrap"><span class="betheader">Away</span><span class="betheader">Draw</span><span class="betheader">Home</span></div>
                    <div class="clear"></div>
                    <div><span class="bettext-big">TEAM A v TEAM B</span><span class="bet">3.80</span><span class="bet">2.00</span><span class="bet">2.80</span></div>
                    <div class="clear"></div>
                </div>
                <div class="betcontainer">
                    <p class="bettitle">Half with most goals</p>
                    <div><span class="bettext-xlarge">1st Half</span><span class="bet">3.20</span></div>
                    <div class="clear"></div>
                    <div><span class="bettext-xlarge">2nd Half</span><span class="bet">1.95</span></div>
                    <div class="clear"></div>
                    <div><span class="bettext-xlarge">Draw</span><span class="bet">3.30</span></div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>

这是我的CSS：

.clear {
    clear: both;
}

body {
    font-family: Arial;
}
.iframe-container {
    width: 610px;
    height: 370px;
    background: #f3f3f3;
    position:relative;
    overflow:hidden;
}

.content {
    margin-top: 40px;
    height:300px;
    overflow-y:auto;
    padding:0px 20px;
}

.bet {
    width:66px;
    display:block;
    line-height:27px;
    text-align:center;
    background:blue;
    float:left;
    border-top:1px solid #cad6e4;
    border-bottom:1px solid #cad6e4;
    border-right:1px solid #cad6e4;
    cursor:pointer;
    font-weight:bold;
    color:white;
}
.bet:hover{
    background:grey;
    color:white;
}

.betcontainer {
    width:556px;
    font-size:12px;
    font-family:Arial;
}
.bettitle {
    width:551px;
    line-height:27px;
    padding-left:3px;
    background: red;
    color:white;
    font-weight:bold;
    border:1px solid #cad6e4;
}

.bettext-big{
    float:left;
    line-height:27px;
    width:347px;
    background:yellow;
    padding-left:6px;
    border:1px solid #cad6e4;
}
.bettext-medium{
    float:left;
    line-height:27px;
    width:203px;
    background:yellow;
    padding-left:6px;
    border:1px solid #cad6e4;

}
.bettext-xlarge{
    float:left;
    line-height:27px;
    width:481px;
    background:yellow;
    padding-left:6px;
    border:1px solid #cad6e4;
}

.betheaderwrap {
    width:100%;
    height:15px;
    background:#ddd;
}
.betheader {
    width:66px;
    line-height:15px;
    color:#666;
    float:right;
    text-align:center;
    font-weight:bold;
}

.seperatebets {
    width:100%;
    height:10px;
    background:white;
}

Answer 1

你可以使用花车。如果您需要您的布局具有响应性，请给出%宽度而不是px.

您需要计算以使每行上每个块的宽度总和不超过 100%。

然后使用box-sizing:border-box;css 属性，以便在每个块上设置的宽度也包含边框（有关该属性的概述，请参见此处）。

这是一个示例FIDDLE