时间戳

首页 > 解决方案 > 如何使 div 的大小与其内容相同，而内容没有换行符？

javascript - 如何使 div 的大小与其内容相同，而内容没有换行符？

问题描述

我得到了一个div屏幕宽度。它有overflow: scroll. 在这个 div 中，我有0-n其他可以有不同宽度的 div。

我希望我的 div 随内容一起增长，所以我可以简单地水平滚动。然而，我的 div 只是在高度上增长，它的内容只是垂直堆叠。display: inline-block不适用于内容。

我怎么解决这个问题？

PS：如果我为我的 div 设置一个固定的宽度，它会起作用，当然这在大多数情况下太宽或太小了。

谢谢！

标签： javascripthtmlcss

解决方案

你是这个意思吗？

如果您不想定义宽度，则可以使用 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>

推荐阅读