с использованием переполнения в css

Question

Как настроить ширину первых двух divs как динамических (соответствовать ширине содержимого), в то время как третий div должен использовать оставшееся горизонтальное пространство и быть горизонтально прокручиваемым.

В результате мне нужно, чтобы все 3 divs сидели бок о бок, а 3-й div - прокручиваемо.

Script у меня есть выглядит следующим образом

HTML

<div id="a"> 
    <table> 
    <tr><td>text</td></tr> 
    </table> 
</div> 
<div id="b"> 
    <table> 
    <tr><td>text</td></tr> 
    </table> 
</div> 
<div id="c"> 
    <table> 
    <tr><td>text</td></tr> 
    </table> 
</div> 

CSS

div#a 
{ 
float: left; 
} 
div#b 
{ 
float: left; 
} 
div#c 
{ 
float: left; 
width: 100%; 
overflow-x: scroll; 
} 

выше сценарий выталкивает div3 к следующей строке, которую я не хочу.

Answer 1

Если вы плаваете #a и #b слева, #c заполнит остальную часть ширины родителя.

Чтобы получить #c горизонтально прокручивать, вы стилизовать его содержание контейнера, как:

#c .scroll-content { 

    /* You shouldn't do this on a table, but rather on a wrapping container. */ 
    display: inline-block; 
    white-space: nowrap; 
    overflow: auto; 
    overflow-y: hidden; 
} 

Я сделал пример at JSFiddle.

Answer 2

Вы должны установить родительский div, чтобы держать их все вместе в одной строке. Что-то вроде этого вместо этого должно работать.

<div id="parent"> 

<div id="a"> 
    <table> 
    <tr><td>text</td></tr> 
    </table> 
</div> 
<div id="b"> 
    <table> 
    <tr><td>text</td></tr> 
    </table> 
</div> 
<div id="c"> 
    <table> 
    <tr><td>text</td></tr> 
    </table> 
</div> 

</div> 


div#a 
{ 
float: left; 
} 
div#b 
{ 
float: left; 
} 
div#c 
{ 
float: left; 
} 

#parent{ 
width: 100%; 
overflow-x: scroll; 
} 

Также вы можете захотеть реорганизовать свой код. Поскольку все divs плавают влево, вы можете использовать только один класс, который плавает влево. Надеюсь, это поможет.

Answer 3

CSS-...

#a { 
float:left; 
border:solid 1px #000; 
width:33%; 
} 

#b { 
float:left; 
border:solid 1px #000; 
width:33%; 
} 

#c { 
float:left; 
border:solid 1px #000; 
width:33%; 
} 

.scroll{ 
float:left; 
overflow:auto; 
width:100%; 
} 

.content { 
width:1000px; 
overflow:auto; 
} 

И HTML ...

<div id="a"> 
This is text within my first content box 
</div> 

<div id="b"> 
This is text within my second content box 
</div> 

<div id="c"> 
<div class="scroll-content"> 
This is text within my third content box and this is horizontal and scrollable 
</div> 
</div> 

ОБНОВЛЕНО JSFIDDLE ССЫЛКА НИЖЕ РАЗ !!!

И демо на jsfiddle - http://jsfiddle.net/GeLqV/1/

Марк, это будет работать для вас сейчас. Теперь я вижу, что вы хотели, чтобы все три div были в одной строке, а последняя - горизонтальной. Посмотрите мою демонстрационную версию jsfiddle. Независимо от размера вашего экрана, все три div имеют размерность и будут оставаться вместе (по большей части).