以相同的高度潜水和跨海

Question

我想要一个编号为"30"的跨度，与包含它的div的垂直线的高度相同。

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

非常感谢您的帮助。

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

然后您需要给出span"display:block；"

#divDay>span {
    display: block;
}

在此处检查Fiddle

Answer 3

更多选项：

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

或者：

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