我已经显示了inline-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>
最佳答案
您的问题是在以下代码中将宽度设置为250px
.select-bubbles, .bubbles {
padding: 5px;
margin: 3px;
outline: solid 1px white;
background-color: rgb(114, 114, 114);
/* width: 250px; */
/* display: inline-block; */
}
删除内联块并将宽度设置为250px,这会使您的框缩小到小于250px。
如果您希望暂时添加inline块,可以添加更多属性以使其看起来不错。