在css中使用溢出

如何設置第一個2 div的寬度爲動態（適合內容寬度），而第三個div應該使用剩餘的水平空間並可水平滾動。在css中使用溢出

我需要的結果是所有3個div並排放置，第3個div可以滾動。

腳本我有如下

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到下一行，我不想。

來源

2013-03-11 Mark

只是供參考，當你爲ID的聲明樣式時，你不需要#a或#b或#c前面的div。在大多數情況下，您只需擁有#a {}，#b {}，#c {}。 – blackhawk 2013-03-11 03:22:23

如果您希望#c始終在#a和#b下，請在#c中刪除float：left屬性，而使用clear：both; – blackhawk 2013-03-11 03:24:13

前2個父div容器的寬度應該適合您的內容的大小。您可以通過添加邊框來直觀地瞭解：solid 1px＃000;到前兩種風格。 – blackhawk 2013-03-11 03:27:07

如果您將#a和#b浮動到左側，#c將填充父寬度的其餘部分。

爲了得到#c水平滾動，你的風格其內容的容器爲：

我做出了表率at JSFiddle。

來源

2013-03-11 03:52:11

對不起，忘了滾動功能。馬上回來。 – 2013-03-11 03:54:26

現在好多了。 – 2013-03-11 04:07:05

謝謝，完美的作品。 – Mark 2013-03-11 04:31:01

你應該設置一個父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; 
}

此外，你可能想重構你的代碼。由於所有div都向左浮動，所以您可能只想使用浮動到左側的一個類。我希望這有幫助。

來源

2013-03-11 03:27:17

不是我想到的，我只需要第三個div可以滾動，我已經澄清了這個問題。感謝您的CSS提示！ – Mark 2013-03-11 03:48:13

不客氣。你有沒有嘗試給#c添加最小寬度？哦，你還應該給父母添加一個寬度。 – 2013-03-11 04:04:42

的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以下鏈接AGAIN！

而且在jsfiddle演示 - http://jsfiddle.net/GeLqV/1/

馬克，這會爲你現在的工作。我現在看到你想要在同一行上的所有三個div，最後一個可以水平滾動。看看我的jsfiddle演示。不管你的屏幕尺寸是多少，所有三個div的尺寸都很大，並且會保持在一起（大部分）。

來源

2013-03-11 03:54:32 blackhawk

小提琴不工作（html在腳本框中），我相信「c」應該在「a」和「「b」 – 2013-03-11 04:07:16

我的壞人！我剛糾正了jsfiddle鏈接！ – blackhawk 2013-03-11 04:12:22

@blachawk，謝謝，但我需要的內容框並排，而不是彼此頂部。 – Mark 2013-03-11 04:22:58

在css中使用溢出

回答

相關問題