通常,对于这种东西,我只是打网络找到一个很好的解决方案,并一起移动。除了我的情况,这是一个有趣的独特案例,所以我无法找到解决方案。我发现到目前为止最好的是:
http://jsfiddle.net/kizu/UUzE9/
但那不是这样。你看,我有三列;其中两个需要避免被明确的大小。那么第二个确实需要大小;但不完全
请允许我澄清一下我一直在想的条件。
>所有三列具有固定的高度:65px,准确。
>第一列的宽度设置为285px。
>中心列没有定义大小;它只是占用了剩下的任何空间。
>正确的列会将自己的大小调整到其中的任何内容。没有大小显式设置,它只是基于内容调整大小,留下中心列来占用剩下的空间。
>上面,下面和每列之间没有空格。
最终结果将大致如下:
logo | Player | Name -----------------------------------------------------
对于表,我会简单地做到这一点:
<table width="100%" height="65px" cellspacing=0 cellpadding=0> <tr> <td width="285px" height="65px"> logo </td> <td height="65px"> Player </td> <td width="1px" height="65px"> Account </td> </tr> </table>
上表编号:http://jsfiddle.net/zMNYb/
但我试图摆脱使用表和使用基于DIV的布局。有任何想法吗?
提前感谢您的时间,帮助和考虑。
解决方法
您可以使用float:左侧为第一列,float:右侧为最后一列,并使中心列为float:none
更新演示:http://jsfiddle.net/L85rp/3/
HTML
<div class="col1">Column1</div> <div class="col3">Column3</div> <div class="col2">Column2</div>
CSS
.col1 { background-color: #ddf; float: left; } .col2 { background-color: #dfd; float: none; } .col3 { background-color: #fdd; float: right; }
注意:有必要将您的右列放在HTML的中心列之前(见上文,col3在HTML中的col2之前),以确保当浏览器呈现中心列时,它知道如何在现有的浮动元素。
CSS更新
.col1 { background-color: #ddf; float: left; width: 285px; height: 65px; } .col2 { background-color: green; float: none; height: 65px; overflow: hidden; display: table-cell; /* turn this off to lock height at 65px */ } .col3 { background-color: cyan; float: right; height: 65px; }