Question

我得到一个div，它的大小与屏幕的宽度相同。它有overflow: scroll。在这个div中，我还有0-n个其他div，它们的宽度可以变化。

我希望div随着其内容而增长，因此我可以简单地水平滚动。但是，我的div的高度只是增加了，其内容只是垂直堆叠。 display: inline-block在内容上不起作用。

我该如何解决这个问题？

P.S：如果我将div设置为固定宽度，则可以正常工作，当然，大多数情况下，该宽度太宽或太小。

谢谢！

Answer 1

这是您的意思吗？

如果您不想定义宽度，则可以使用jQuery。怎么样？像这样

var width = $('.child').width();;
$('.inner .child').each(function() { width += $(this).width(); });
$('.inner').css('width', width)

 .child{
    width:200px;
    height:100px;
    background:yellow;
    border:1px solid #000;
    display:inline-block;
    }
    .parent{
    overflow-x:auto;
    width:100%;
    border:1px solid red;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<div class="parent">
  <div class="inner">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  </div>
</div>

</body>

Answer 2

您可以混合使用inline-block和white-space:nowrap：

.parent {
    white-space:nowrap; /* make children all on one line */
    width:100%; 
    overflow:auto;
}

.child {
    display: inline-block; /* make inline block so obeys parent's white space */
    white-space: normal; /* reset white space for children */
}

<div class="parent">
    <div class="child">lots of text and stuff</div>
    <div class="child">lots of text and stuff</div>
    <div class="child">lots of text and stuff</div>
    <div class="child">lots of text and stuff</div>
    <div class="child">lots of text and stuff</div>
    <div class="child">lots of text and stuff</div>
    <div class="child">lots of text and stuff</div>
</div>

在内容没有换行符的情况下，如何使div大小与其内容相同？

2 个答案: