有状态栏的高度是100%
我想让状态栏的高度为容器的100%。我尝试给它固定的高度,但即使高度增加时......新行上的文本显示在状态栏下方而不是旁边。有状态栏的高度是100%
代码:
.list {
padding: 0;
border: 1px #666666 solid;
width: 250px;
}
.list > .status-bar {
background-color: red;
width: 20px;
padding: 20px;
display: inline-block;
height: 100%;
}
<div class="list">
<span class="status-bar"> </span>Test 1 Test 1Test 1 Test 1 Test 1 Test 1
</div>
我建议去与flexbox
,它会给你更多的灵活性和控制布局。
.list {
padding: 0;
border: 1px #666666 solid;
width: 250px;
display: flex;
}
.list .status-bar {
background-color: red;
width: 20px;
padding: 20px;
}
.list .status-text {
flex: 1;
}
<div class="list">
<div class="status-bar"></div>
<div class="status-text">Test 1 Test 1Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1</div>
</div>
随着垂直居中文本
.list {
padding: 0;
border: 1px #666666 solid;
width: 250px;
display: flex;
}
.list .status-bar {
background-color: red;
width: 20px;
padding: 40px 20px;
}
.list .status-text {
flex: 1;
display: flex;
align-items: center;
}
<div class="list">
<div class="status-bar"></div>
<div class="status-text">Test 1 Test 1</div>
</div>
你可以试试这个:
浮法
status-bar
到左边允许文字环绕它。-
然后通过清除使用本浮动申请clearfix浮法:
.list:after{ clear: both; content: ''; display: block; }
让我知道你对这个意见。谢谢!
.list {
padding:0;
border: 1px #666666 solid;
width: 250px;
}
.list > .status-bar {
background-color: red;
width: 20px;
padding:20px;
display: inline-block;
height:100%;
float: left;
}
.list:after{
clear: both;
content: '';
display: block;
}
<div class="list">
<span class="status-bar"> </span>Test 1 Test 1Test 1 Test 1 Test 1 Test 1
</div>
有一个问题......我怎样才能使文本与您的更改垂直对齐? – user4756836
@ user4756836刚刚在这里看到你的评论...似乎你已经在LGSon的答案中得到了解决方案:)在这个垂直对齐内联元素的答案中,它需要一些“内嵌块”策略并指定宽度...... – kukkuz
发生这种情况,因为文字是比你的容器的宽度更长。它正在打包并进入状态栏下方。您可以通过将CSS white-space: nowrap;
添加到您的.list
类中来解决此问题。
.list {
padding:0;
border: 1px #666666 solid;
width: 250px;
white-space: nowrap; /* added */
}
.list > .status-bar {
background-color: red;
width: 20px;
padding:20px;
display: inline-block;
height:100%;
}
<div class="list">
<span class="status-bar"> </span>Test 1 Test 1Test 1 Test 1 Test 1 Test 1
</div>
文本将溢出到(你可能希望以某种方式来处理 - 也许overflow:hidden
)的权利,但它确实解决你的问题。
快速决定:
.list {
display: table;
}
.list > .status-bar {
display: table-cell;
}
最终结果是状态栏始终占据左侧并且文本向右? – LGSon
是的正确@LGSon – user4756836