html - 外部 DIV 不收缩包装

Question

我有显示内联 block 等，但此标记中的 htmlDiv div 的行为与我预期的不同。它的行为就好像内部 div 彼此相邻，即使它们不相邻也是如此。如何解决这个问题？

如果不清楚，请运行动画片段...

var demoContainer = d3.select('#demoContainer').style('width', '100px')
    function tick() {
      demoContainer.transition().duration(4000).style('width', '400px')
      .transition().duration(4000).style('width', '600px')
      .transition().duration(3000).style('width', '400px')
      .transition().duration(3000).style('width', '100px')
      .each('end', tick);
    };
    tick();

#htmlDiv {
      font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
  font-size: 12px;    
  outline: solid 1px black;
      background-color: rgba(0, 0, 0, 0.25);
      display: inline-block;
      position: relative;
    }

    .container {
      height: auto;
      width: 100%;
      display: inline-block;
      position: relative;
    }

    .bubbles,
    .subBubbles,
    .span {
      color: #ccc;
    }

    .select-bubbles,
    .bubbles {
      padding: 5px;
      margin: 3px;
      outline: solid 1px white;
      background-color: rgb(114, 114, 114);
      width: 150px;
      display: inline-block;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="demoContainer" style="outline: solid 3px red; padding: 10px">
    <div id="htmlDiv">
      I want this outer div to shrink-wrap the 4 inner divs regardless of width... <br>
      <div class="container">
        <div class="select-bubbles">
          <select class="selector">
            <option value="select">select</option>
            <option value="selectAll">selectAll</option>
          </select>
          <select id="multi-single">
            <option value="4">multi</option>
            <option value="1">single</option>
          </select>
          <div class="select-subBubbles">
            <select class="selector">
              <option value="select">select</option>
              <option value="selectAll" selected="selected">selectAll</option>
            </select>
            <span class="select-spans">
              <select class="selector">
                <option value="select">select</option>
                <option value="selectAll">selectAll</option>
              </select>
            </span>
          </div>
        </div>
      </div> <br>
      <div class="bubbles bubble1">
        bubble1
        <div class="subBubbles bubble1">
          <span>sub1</span>
          <span class="spans bubble1">
            <span style="transform: rotateX(0deg); color: rgb(0, 0, 0);" class="temp">
              sub1
            </span> subsub1
          </span>
          <span class="spans bubble2">subsub2</span>
        </div>
        <div class="subBubbles bubble2">
          <span>
            sub2
          </span>
          <span class="spans bubble1">
            <span class="temp">
              sub2
            </span>
            subsub1
          </span>
        </div>
      </div>
      <div class="bubbles bubble2">
        bubble2
        <div class="subBubbles bubble1">
          sub1
          <span class="spans bubble1">subsub1</span>
          <span class="spans bubble2">subsub2</span>
        </div>
        <div class="subBubbles bubble2">
          sub2
          <span class="spans bubble1">subsub1</span>
          <span class="spans bubble2">subsub2</span>
        </div><div class="subBubbles bubble3">
          sub3
          <span class="spans bubble1">
            subsub1
          </span>
          <span class="spans bubble2">
            subsub2
          </span>
        </div>
      </div>
      <div class="bubbles bubble2">
        bubble2
        <div class="subBubbles bubble1">
          sub1
          <span class="spans bubble1">subsub1</span>
          <span class="spans bubble2">subsub2</span>
        </div>
        <div class="subBubbles bubble2">
          sub2
          <span class="spans bubble1">subsub1</span>
          <span class="spans bubble2">subsub2</span>
        </div><div class="subBubbles bubble3">
          sub3
          <span class="spans bubble1">
            subsub1
          </span>
          <span class="spans bubble2">
            subsub2
          </span>
        </div>
      </div>
    </div>
  </div>

Answer 1

你的问题是你在下面的代码中将宽度设置为 250px

.select-bubbles, .bubbles {
     padding: 5px;
  margin: 3px;
  outline: solid 1px white;
  background-color: rgb(114, 114, 114);
  /* width: 250px; */
  /* display: inline-block; */
 }

移除内联 block 并将宽度设置为 250px，这会导致您的框不会收缩小于 250px。

我们暂时删除了内联 block ，如果您愿意，可以添加更多属性以使其看起来更好。