子div不在引导选项卡

时间：2017-07-19 09:45:47

标签： jquery html css twitter-bootstrap

我正在使用一个bootstrap选项卡，其中子div应该取高度为父div。由于子div的内容会动态变化，我无法设置子div的高度。现在我正在使用jQuery计算高度，并且它对tab1工作正常，但在tab2中，相同的jQuery代码无效。这是在线链接，您可以在其中看到蓝色div不是父div高度。 http://www.anotheritdude.com/clients/index.html 

$(document).ready(function() {
  ////for func block////
  $('.func_left').each(function() {
    var parentheight = ($(this).parent().height());
    $(this).height(parentheight);

  });
  ////for user block////
  $('.user_left').each(function() {
    var parentheightUser = ($(this).parent().height());
    $(this).height(parentheightUser);
  });
});
.func_block {
  display: table;
  width: 100%;
  border: 2px #ff732f solid;
  margin-bottom: 10px;
}

.func_left {
  float: left;
  display: table-cell;
  background: #ff732f;
  color: #fff;
  padding: 5px;
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.func_right {
  float: right;
  display: table-cell;
  background: #fff;
  color: #ff732f;
  padding: 5px;
  width: 85%
}

.user_block {
  display: table;
  width: 100%;
  border: 2px #5eaeff solid;
  margin-bottom: 10px;
}

.user_left {
  float: left;
  display: table-cell;
  background: #5eaeff;
  color: #fff;
  padding: 5px;
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user_right {
  float: right;
  display: table-cell;
  background: #fff;
  color: #5eaeff;
  padding: 5px;
  width: 85%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-content clearfix">
  <div class="tab-pane active" id="1a">
    <div class="func_block">
      <div class="func_left" style="background: #ff732f;"> HR </div>
      <!--recurring blocks-->
      <div class="func_right"> test content </div>
    </div>
    <!--recurring blocks-->

    <!--recurring blocks-->
    <div class="func_block">
      <div class="func_left" style="background: #ff732f;"> PSR </div>
      <div class="func_right"> <span class="func_content">test content</span> <span class="func_content">test content test content</span> <span class="func_content">test content</span> <span class="func_content">test content</span> <span class="func_content">test content</span>        <span class="func_content">test content</span> <span class="func_content">test content</span> <span class="func_content">test conten,t test content</span> <span class="func_content">test content</span> <span class="func_content">test content</span>        <span class="func_content">test content</span> <span class="func_content">test content</span> </div>
    </div>
    <!--recurring blocks-->

  </div>
  <div class="tab-pane" id="2a">
    <!--recurring blocks-->
    <div class="user_block">
      <div class="user_left"> HR </div>
      <div class="user_right"> <span class="user_content">test content</span> </div>
    </div>
    <!--recurring blocks-->
    <!--recurring blocks-->
    <div class="user_block">
      <div class="user_left"> HR </div>
      <div class="user_right"> <span class="user_content">test content</span> <span class="user_content">test content test content</span> <span class="user_content">test content</span> <span class="user_content">test content</span> <span class="user_content">test content</span>        <span class="user_content">test content</span> <span class="user_content">test content</span> <span class="user_content">test conten,t test content</span> <span class="user_content">test content</span> <span class="user_content">test content</span>        <span class="user_content">test content</span> <span class="user_content">test content</span> </div>
    </div>
    <!--recurring blocks-->
  </div>
</div>

2 个答案:

答案 0 :(得分：1)

这是你想要做的吗？我使用了display: flex代替table，删除了float属性和jQuery。

＆＃13;
＆＃13; 
.func_block {
  display: flex;
  width: 100%;
  border: 2px #ff732f solid;
  margin-bottom: 10px;
}

.func_left {
  background: #ff732f;
  color: #fff;
  padding: 5px;
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.func_right {
  background: #fff;
  color: #ff732f;
  padding: 5px;
  width: 85%
}

.user_block {
  display: flex;
  width: 100%;
  border: 2px #5eaeff solid;
  margin-bottom: 10px;
}

.user_left {
  background: #5eaeff;
  color: #fff;
  padding: 5px;
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user_right {
  background: #fff;
  color: #5eaeff;
  padding: 5px;
  width: 85%
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-content clearfix">
  <div class="tab-pane active" id="1a">
    <div class="func_block">
      <div class="func_left" style="background: #ff732f;"> HR </div>
      <!--recurring blocks-->
      <div class="func_right"> test content </div>
    </div>
    <!--recurring blocks-->

    <!--recurring blocks-->
    <div class="func_block">
      <div class="func_left" style="background: #ff732f;"> PSR </div>
      <div class="func_right"> <span class="func_content">test content</span> <span class="func_content">test content test content</span> <span class="func_content">test content</span> <span class="func_content">test content</span> <span class="func_content">test content</span>        <span class="func_content">test content</span> <span class="func_content">test content</span> <span class="func_content">test conten,t test content</span> <span class="func_content">test content</span> <span class="func_content">test content</span>        <span class="func_content">test content</span> <span class="func_content">test content</span> </div>
    </div>
    <!--recurring blocks-->

  </div>
  <div class="tab-pane" id="2a">
    <!--recurring blocks-->
    <div class="user_block">
      <div class="user_left"> HR </div>
      <div class="user_right"> <span class="user_content">test content</span> </div>
    </div>
    <!--recurring blocks-->
    <!--recurring blocks-->
    <div class="user_block">
      <div class="user_left"> HR </div>
      <div class="user_right"> <span class="user_content">test content</span> <span class="user_content">test content test content</span> <span class="user_content">test content</span> <span class="user_content">test content</span> <span class="user_content">test content</span>        <span class="user_content">test content</span> <span class="user_content">test content</span> <span class="user_content">test conten,t test content</span> <span class="user_content">test content</span> <span class="user_content">test content</span>        <span class="user_content">test content</span> <span class="user_content">test content</span> </div>
    </div>
    <!--recurring blocks-->
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

只能使用flexbox才能使用CSS。 align-items的默认设置为“拉伸”，这意味着它们将从上到下覆盖。

.container {
  display: flex;
  justify-content: space-around;
  background-color: blue;
  height: 100px;
}

.container>div {
  background-color: orange;
  width: 40%;
  border: thin solid blue;
  text-align: center;
}
<div class="container">
  <div class="left">Update</div>
  <div class="right">Insert</div>
</div>

相关问题
最新问题