根据水平滚动内容计算以像素为单位的div宽度

Question

我有一个具有静态宽度的父div。 在按钮上单击我必须将一些子div添加到该父项。

如果子div的总宽度超过父宽度，我必须提供一个水平滚动。 但是主要的问题是，我不能为child div设置静态宽度。 它必须与该特定div的字符串（内容）一致。

我只想在单行中显示内容。

1234 56789 111 111 1111 1111111 11 111111 11111111111 - div 1 content

2223333 - div 2 content

2222 333 222 2 33 44 33333 -div 3 content

就像无限的孩子​​div会来。 是否有任何方法可以根据内容的长度（包括空格）找到div的宽度。 如果可以的话，我可以设置每个子div的宽度。

我加了一个小提琴，但这并不完美。

<div class="wrap-poltrona">
<div class="poltrona">jndjjwnjwq</div>
<div class="poltrona">jndjwdjnwqjd</div>
<div class="poltrona">nd nwdwednwedwendewjdwejdewdenewdjwenejwjnedjewjdewjdewdjewdwjjdwjejw</div>
<div class="poltrona"></div>
<div class="poltrona"></div>
<div class="poltrona"></div>
<div class="poltrona"></div>
<div class="poltrona"></div>
<div class="poltrona"></div>
<div class="poltrona"></div>
<div class="poltrona"></div>
<div class="poltrona"></div>
<div class="poltrona"></div>
<div class="poltrona"></div>
<div class="poltrona"></div>
<div class="poltrona"></div>
<div class="poltrona"></div>
<div class="poltrona"></div>

码

Answer 1

您可以尝试.width（） ，它可以帮助您获取width of the content width, Document width or window width 。

Answer 2

您需要计算内部<div>的数量，然后将包装的宽度除以该宽度。 然后将内部的设置为计算出的宽度。

 $(document).ready(function() { var p = $(".wrap-poltrona > .poltrona"); var cs = getComputedStyle(p.get(0)); var m = parseInt(cs.marginLeft) + parseInt(cs.marginRight); var w = $(".wrap-poltrona").width() / p.length; p.width(w - m * 1.01); }); 

 .wrap-poltrona { width: 500px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; height: 100px; border: 1px solid green } .poltrona { height: 100%; background-color: red; // display:inline-block; margin: 5px; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap-poltrona"> <div class="poltrona">jnd</div> <div class="poltrona">jn</div> <div class="poltrona">nd n</div> <div class="poltrona"></div> <div class="poltrona"></div> <div class="poltrona"></div> <div class="poltrona"></div> <div class="poltrona"></div> <div class="poltrona"></div> <div class="poltrona"></div> <div class="poltrona"></div> <div class="poltrona"></div> <div class="poltrona"></div> <div class="poltrona"></div> <div class="poltrona"></div> <div class="poltrona"></div> <div class="poltrona"></div> <div class="poltrona">end</div> </div> 

我使用了1.01的系数来稍微减小宽度，以防最后一个内部div由于舍入而消失。