Как сделать так, чтобы макет из 3 столбцов занимал 100% ширину?

Question

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>

Answer 1

Обычный способ сделать это - переместить все 3 деления влево и убрать границу, потому что в некоторых браузерах она сломается из-за этого 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>

Edit1: jsfiddle для тестирования -> измените ширину оболочки, чтобы увидеть, масштабируется ли она до любой ширины без разрыва ...

Answer 2

#div2 { border:solid 1px #000; float:left; width:40%; }

установить ширину: от 40% до div2, не забудьте убрать границу

Answer 3

HTML:

<div id="div1">
    <button id="Button1">Button 1</button>
</div>
<div id="div2">
    <div id="div2a">
        <button id="Button2">Button 2</button>
    </div>
    <div id="div2b">
    <button id="Button3">Button 3</button>
    </div>
</div>

CSS:

#div1 { width:30%; border:solid 1px #000; float:left; }
#div2 { margin-left: 30.3% }
#div2a { width:49.3%; border:solid 1px #000; float: left }
#div2b { width:49.3%; border:solid 1px #000; float:right; }


#Button1 { width:100% }
#Button2 { width:100% }
#Button3 { width:100% }

Answer 4

Проверьте это: http://jsfiddle.net/thilakar/mYkjQ/3/

Я сделал приблизительный расчет. я надеюсь, что это может быть полезно для вас