如何使div的寬度超出父級的寬度？

Question

我有一個wrapper div和一個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 ，並導致在wrapper div上滾動？

Answer 1

哦，我想我現在看到了問題，試試：

#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/

Answer 2

如果您將樣式更改為以下內容，您將達到您想要的效果：

#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;
}

例

Answer 3

在.column中，如果使用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;
  }