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出现在两行而不是同一行。如果我使用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;
}

Example

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

如何使div的宽度超出父宽度？

3 个答案: