Div und span mit der gleichen Höhe

Question

Ich möchte meine Spannweite mit der Nummer "30" mit der gleichen Höhe der vertikalen Linie des div, die es enthält.

#divDay { 
font-family: Arial; 
font-size: 44px; 
border-right: 2px solid #000; 
margin-bottom: 6px; 
margin-top: 10px; 
height: 100% 
} 

#divDate { 
font-family: Arial; 
font-size: 18px; 
margin-bottom: 6px; 
margin-top: 10px; 

} 

#divHeader{ 
border-bottom: 2px solid #000; 
} 


<div class="row"> 
    <div id="divHeader" class="col-xs-12"> 
     <div id="divDay" class="col-xs-2"> 
      <span>30</span> 
     </div> 
     <div id="divDate" class="col-xs-10"> 
      <div class="row"> 
       <span style="margin-left: 8px">Monday</span> 
      </div> 
      <div class="row"> 
       <span style="margin-left: 8px">April 2016</span> 
      </div> 
     </div> 
    </div>     
</div> 

https://jsfiddle.net/h1m80Lv8/

Vielen Dank für jede Hilfe.

Answer 1

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 
#divDay { 
 
    font-family: Arial; 
 
    height: 100% 
 
} 
 

 
#divDate { 
 
    border-left: 2px solid #000; 
 
    font-family: Arial; 
 
    font-size: 18px; 
 
    margin-bottom: 6px; 
 
    margin-top: 10px; 
 
} 
 
#divDay span { position:absolute;font-size: 72px;margin-top:-15px;} 
 
#divHeader{ 
 
    border-bottom: 2px solid #000; 
 

 
}

<div class="row"> 
 
    <div id="divHeader" class="col-xs-12"> 
 
    <div id="divDay" class="col-xs-2"> 
 
     <span>30</span> 
 
    </div> 
 
    <div id="divDate" class="col-xs-10"> 
 
     <div class="row"> 
 
     <span style="margin-left: 8px">Monday</span> 
 
     </div> 
 
     <div class="row"> 
 
     <span style="margin-left: 8px">April 2016</span> 
 
     </div> 
 
    </div> 
 
    </div>     
 
</div>

Answer 2

Dann müssen Sie den Bereich "display: block;"

#divDay>span { 
    display: block; 
} 

Check Fiddle here

Answer 3

Weitere Optionen:

<span style="padding: 6px;">30</span> 

Oder:

<span style="display:inline-block;">30</span>