外部DIV不收縮包裝

Question

我有顯示內嵌塊等，但在這種標記中的htmlDiv div不像我預期的那樣。它的表現就好像內部divs在彼此旁邊，即使它們不是。如何解決這個問題？

請運行動畫片段，如果它是不明確......

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

存在的問題與你的是你在下面的代碼

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

刪除inline-block的爲250像素設置寬度和你的寬度設置爲250像素這會導致你的機器不縮水超過250像素少。

我們現在正在刪除內聯塊，如果你想你可以添加一些更多的屬性，使它看起來不錯。

Answer 2

你的問題還不清楚，但我認爲要做到以下幾點：

.container, 
.select-bubbles, 
.bubbles { 
    display: block; 
} 

而不是inline-block。