相关疑难解决方法(0)
在容器包装时使容器缩小到适合的子元素
我想弄清楚flexbox如何工作(应该工作？...),如下所示:
.holder {
width: 500px;
background: lightgray;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
}
.v2 {
width: 320px;
}
.child {
display: inline-block;
border: 1px solid black;
padding: 30px 0px;
text-align: center;
}<div class="holder">
<div class="child">At a glance</div>
<div class="child">After coverage ends</div>
<div class="child">Forms & documents</div>
</div>
<br>
<br>
<div class="holder v2">
<div class="child">At a glance</div>
<div class="child">After coverage ends</div>
<div class="child">Forms & documents</div>
</div>
<br>
<br>
<div class="holder v2">
<div class="child">At a
<br>glance</div>
<div class="child">After coverage …23
推荐指数
推荐指数
2
解决办法
解决办法
9631
查看次数
查看次数
当内联块元素换行时,CSS包装器不适合新的宽度
inline-block如果由于屏幕宽度导致内容换行,如何获得适合其内容宽度的元素？
<!-- parent inline-block -->
<div style='display: inline-block;'>
<div style='display: inline-block; width:200px;'></div>
<!--
If this child line breaks,
two 200px wide blocks are stacked vertically.
That should make the parent width 200px,
but the parent stays much wider than that
-->
<div style='display: inline-block; width:200px;'></div>
</div>
我想不出如何用这句话来说这听起来很容易,但我把一个简单的JSFiddle放在一起说明.
#wide {
position: relative;
width: 100%;
border: 1px solid black;
padding: 5px;
}
#narrow {
position: relative;
width: 175px;
border: 1px solid black;
padding: 5px;
}
.wrap {
display: inline-block; …22
推荐指数
推荐指数
2
解决办法
解决办法
5669
查看次数
查看次数
如何调整 div 的宽度以适应自动换行？
div当自动换行时是否可以调整元素的大小？出于演示目的，请查看类似问题中的示例：
.mypost {
border: 1px solid Peru;
margin: auto;
min-width: 200px;
display: inline-block;
background: red;
}
.test {
margin: 10px;
background: cyan;
}<div class="mypost">
<div class="test">I represent the imagdfv fdvdsdfsdfve.</div>
</div>如果将窗口缩小以便进行自动换行，您将看到文本右侧有一个蓝色的空白区域。相反，我希望蓝色区域减少，直到到达第一行的最后一个字母。
（在这张图片中，我强制自动换行。我希望蓝色区域缩小。）
这可能吗？
13
推荐指数
推荐指数
1
解决办法
解决办法
5631
查看次数
查看次数