Div和span具有相同的高度

时间:2016-03-31 07:24:14

标签: html twitter-bootstrap css3 twitter-bootstrap-3

我希望我的数量超过" 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/

非常感谢任何帮助。

3 个答案:

答案 0 :(得分:0)

然后你需要给出span“display:block;”

#divDay>span {
    display: block;
}

Check Fiddle here

答案 1 :(得分:0)

更多选项:

var accessToken = '';
var checkLoginStatus = function(callback) {
  FB.getLoginStatus(function(response) {
    if (response.status === 'connected') {
      accessToken = response.authResponse.accessToken;
      callback(accessToken);
    } else {
      callback(false);
    }
  });
}
var getUserAlbum = function() {
  checkLoginStatus(function(token) {
    console.log(token + ' => in get album function'); // it log undefined here that is why else part executes.
    if (token) {
      FB.api(
        "/me/albums/", {
          'accessToken': token
        },
        function(response) {
          if (response && !response.error) {
            console.log(response);
          }
        }
      );
    } else {
      alert("You are not logged in");
    }
  });
}

或者:

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

答案 2 :(得分:0)

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