次の「テーブル」があります。
コンテナの幅に基づいて、青いブロックに特定の幅を持たせ、黄色のブロックを拡張して残りのスペースを埋めたいところ。
私の現在のアプローチは、すべての行のすべてのブロックを左にフロートさせ、特定の幅を与えることですが、このアプローチはスケーラブルではなく、反応がありません。
私が達成したいことに対するより良いアプローチを教えてください。
フィドラーも作成したので、マークアップを操作して、私が何をしたかを確認できます。
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;
}