如何讓div的寬度超出父寬度？

我有一個wrapper股利和content股利。如何讓div的寬度超出父寬度？

<style type="text/css"> 
    #wrapper { 
     width: 500px; 
     border: 1px solid red; 
     overflow: auto; 
    } 

    #content { 
     border: 1px solid blue; 
    } 

    .column { 
     display: inline-block; 
     width: 300px; 
    } 
</style> 

<div id="wrapper"> 
    <div id="content"> 
     <div class="column">hello</div> 
     <div class="column">world</div> 
    </div> 
</div>

column s出現在兩行而不是同一行上。如果我使用display: table-cell作爲樣式，那麼它們每個都佔用50％的寬度，但仍不會將content擴展超出wrapper的寬度。

如何讓content div擴展爲適合同一行上的兩個column s並導致在wrapper div上滾動？

來源

2014-03-26 stackular

嘗試添加'white-space：nowrap; display：inline-block;'to'＃content'：http://jsfiddle.net/PC5nn/ – Pete

@Pete請把它作爲答案。 – stackular

答案已添加 - 我在（和更新的小提琴）中添加了一些額外的樣式以使列的內容正常工作 – Pete

如果你改變你的風格下面你會實現你想要什麼：

#wrapper { 
    width: 500px; 
    border: 1px solid red; 
    overflow: auto; 
} 

#content { 
    display: inline-block; 
    border: 1px solid blue; 
    white-space:nowrap; 
} 

.column { 
    vertical-align:top; 
    display: inline-block; 
    width: 300px; 
    white-space:normal; 
}

Example

來源

2014-03-26 12:12:58 Pete

喔，我想我現在看到的問題，請嘗試：

#wrapper { 
    width: 500px; 
    border: 1px solid red; 
    overflow: auto; 
} 

#content { 
    white-space:nowrap; 
    border: 1px solid blue; 
} 

.column { 
    display: inline-block; 
    width: 300px; 
}

http://jsfiddle.net/krowe/z3TS8/

來源

2014-03-26 12:08:39 krowe

列的數量動態變化以及列的寬度。樣式表應該適應任何類型的內容。 – stackular

@stackular現在嘗試小提琴。它是否正確？ – krowe

In .column if yo你使用display：table-cell，列會按照你需要的排列在同一行。它的工作適合我。希望這是你正在尋找的JSFiddle

#wrapper { 
     width: 500px; 
     border: 1px solid red; 
     overflow: auto; 
     display:table; 
    } 
    #content { 
     overflow: hidden; 
     display:table-row; 
    } 
    .column { 
     width:50%; 
     border: 1px solid blue; 
     display:table-cell; 
    }

來源

2014-03-26 12:22:06

如何讓div的寬度超出父寬度？

回答

相關問題