Question

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

如果子div的总宽度超过父宽度，我必须提供一个水平滚动。但主要问题是，我无法为子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>

CODE

Answer 1

您可以尝试使用.width()来帮助您获取width of the content width, Document width or window width。

Answer 2

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

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

我使用因子1.01来略微减小宽度，以防最后一个内部div由于四舍五入而消失。

根据水平滚动的内容

2 个答案: