Question

我试图让状态栏的高度为容器的100％。我尝试给它固定的高度，但即使高度增加......新行上的文字显示在状态栏下方而不是旁边。

代码：

＆＃13;

.list {
  padding: 0;
  border: 1px #666666 solid;
  width: 250px;
}
.list > .status-bar {
  background-color: red;
  width: 20px;
  padding: 20px;
  display: inline-block;
  height: 100%;
}

＆＃13;

<div class="list">
  <span class="status-bar">&nbsp;</span>Test 1 Test 1Test 1 Test 1 Test 1 Test 1
</div>

＆＃13;

JSFiddle Demo

Answer 1

我建议使用flexbox，它会为您提供更多灵活性和控制的布局。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

垂直居中的文字

＆＃13;

.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;
}

＆＃13;

<div class="list">
  <div class="status-bar"></div>
  <div class="status-text">Test 1 Test 1</div>
</div>

＆＃13;

Answer 2

你可以试试这个：

将status-bar浮动到左侧以允许文本环绕它。
然后通过使用以下方法清除浮动来应用clearfix for float：
```
.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">&nbsp;</span>Test 1 Test 1Test 1 Test 1 Test 1 Test 1
  
</div>

Answer 3

发生这种情况是因为文本长于容器的宽度。它正在包装并位于状态栏下方。您可以通过将CSS white-space: nowrap;添加到.list课程来解决此问题。

＆＃13;

.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%;
}

＆＃13;

<div class="list">
  <span class="status-bar">&nbsp;</span>Test 1 Test 1Test 1 Test 1 Test 1 Test 1
</div>

＆＃13;

文本将向右溢出（您可能希望以某种方式处理 - 也许overflow:hidden），但它确实解决了您的问题。

Answer 4

快速决定：

.list {
  display: table;
}

.list > .status-bar {
  display: table-cell;
}

您想要的结果：https://jsfiddle.net/1dkcjgua/2/

状态栏的高度为100％

4 个答案: