Иметь высоту строки состояния 100%

Question

Я стараюсь, чтобы высота строки состояния составляла 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">&nbsp;</span>Test 1 Test 1Test 1 Test 1 Test 1 Test 1 
 
</div>

JSFiddle Demo

Answer 1

Я рекомендую идти с 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>

Answer 2

Вы можете попробовать это:

1. плавающем status-bar в влево, чтобы текст мог обернуться вокруг него.

2. Затем нанесите 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">&nbsp;</span>Test 1 Test 1Test 1 Test 1 Test 1 Test 1 
 
    
 
</div>

Answer 3

Это происходит потому, что текст длиннее, чем ширина вашего контейнера. Он обертывается и идет ниже вашей строки состояния. Вы можете исправить это, добавив 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">&nbsp;</span>Test 1 Test 1Test 1 Test 1 Test 1 Test 1 
 
</div>

Текст переливается вправо (который вы можете захотеть обрабатывать каким-то образом - может быть overflow:hidden), но это не решить вопрос.

Answer 4

Краткое решение:

.list { 
    display: table; 
} 

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

Ваш желаемый результат: https://jsfiddle.net/1dkcjgua/2/