wie div mit einer Zeile Text und div mit zwei die gleiche Höhe machen?

Question

Wie kann ich alle Boxen (Box-Klasse) auf die gleiche Höhe bringen, damit der Status in derselben Zeile ist? Der Text innerhalb der Boxen muss vertikal ausgerichtet sein. Ich brauche so etwas wie dieses (nicht über die Pfeile Sorge):

Ich brauche IE10 zu unterstützen. Ich habe HTML und CSS wie folgt aus:

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
ul li { 
 
    float: left; 
 
} 
 
.box { 
 
    white-space: pre; 
 
    text-align: center; 
 
    display: block; 
 
    border: 1px solid black; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    width: 200px; 
 
    padding: 10px 0; 
 
}

<ul> 
 
    <li> 
 
    <span class="box">Get parent 
 
folder owner</span> 
 
    <span class="status">PASSED</span> 
 
    </li> 
 
    <li> 
 
    <span class="box">Some text</span> 
 
    <span class="status">PASSED</span> 
 
    </li> 
 
    <li> 
 
    <span class="box">Some text</span> 
 
    <span class="status">RUNNING</span> 
 
    </li> 
 
</ul>

Answer 1

In drei letzten Eigenschaften:

.box { 
    white-space: pre; 
    text-align: center; 
    display: block; 
    border: 1px solid black; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    width: 200px; 
    padding: 9px 0; 
    /*add the lines below:*/ 
    display: table-cell; 
    height: 70px; 
    vertical-align: middle; 
} 

Answer 2

Wenn Sie den HTML-Code neu anordnen kann, ist die Lösung, die eine Tabellenstruktur zu verwenden.

.thetable { 
 
    display: table; 
 
    border-spacing: 10px 0; 
 
} 
 
.boxrow, .statusrow { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: table-row; 
 
} 
 
.boxrow li { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    white-space: pre; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    width: 200px; 
 
    padding: 10px 0; 
 
} 
 
.statusrow li { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
}

<div class="thetable"> 
 
    <ul class="boxrow"> 
 
    <li>Get parent 
 
folder owner</li> 
 
    <li>Some text</li> 
 
    <li>Some text</li> 
 
    </ul> 
 
    <ul class="statusrow"> 
 
    <li>PASSED</li> 
 
    <li>PASSED</li> 
 
    <li>RUNNING</li> 
 
    </ul> 
 
</div>