jsFiddle:
http://jsfiddle.net/mYkjQ/
如何让div2 Button2填充窗口宽度的其余部分?
谢谢.
CSS
td { border:solid 1px #000; float:left; }
#div1 { width:30%; border:solid 1px #000; float:left; }
#div2 { border:solid 1px #000; float:left; }
#div3 { width:30%; border:solid 1px #000; float:right; }
#Button1 { width:100% }
#Button2 { width:100% }
#Button3 { width:100% }
HTML
<div id="div1">
<button id="Button1">Button 1</button>
</div>
<div id="div2">
<button id="Button2">Button 2</button>
</div>
<div id="div3">
<button id="Button3">Button 3</button>
</div>
最佳答案 通常的方法是将所有3个div-s浮动到左侧,并删除边框,因为在某些浏览器上它会因为1个像素而中断.
如果你真的需要边框,那么这样做:
<style type="text/css">
#div1, #div3 { float:left; width:30%; }
#div2 { float:left; width:40%; }
#subdiv1, #subdiv2, #subdiv3 { border:solid 1px #000; }
#Button1, #Button2, #Button3 { width:100% }
</style>
<div id="div1">
<div id="subdiv1">
<button id="Button1">Button 1</button>
</div>
</div>
<div id="div2">
<div id="subdiv2">
<button id="Button2">Button 2</button>
</div>
</div>
<div id="div3">
<div id="subdiv3">
<button id="Button3">Button 3</button>
</div>
</div>
编辑1:jsfiddle for testing – >更改包装器宽度,看看它是否可以缩放到任何宽度而不会破坏…