如何让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的宽度超出父宽度？

回答

相关问题