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

Question

我有以下“表格”:

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

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

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

我还制作了一个 fiddler，这样你就可以玩标记，看看我做了什么。

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

您可以使用 float 。如果您需要响应式布局，请提供 % 宽度而不是 px。

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

然后使用 box-sizing:border-box; css 属性，以便每个 block 上设置的宽度也包含边框(有关该属性的概述，请参阅 here)。

这是一个例子 FIDDLE