Question

我有两个div并排，但那些div在另一个div内。

<div class="row">
    <div id="maindiv1">
        <div id="subdiv1" class="col-md-8 col-sm-8">
            <div class="panel">
                <div id="head1">
                </div>
                <div id="cont1">
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                    <li>d</li>
                    <li>d</li>
                    <li>d</li>
                    <li>d</li>
                </div>
            </div>
        </div>
    </div>
    <div id="maindiv2">
        <div id="subdiv2" class="col-md-8 col-sm-8">
            <div class="panel">
                <div id="head2">
                </div>
                <div id="cont2">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                     <li>4</li>             

                </div>
            </div>
        </div>
    </div>
</div>

在我的情况下，我希望两个div＃cont1和＃cont2动态增长，我需要设置相同的高度。也就是说，＃cont1和＃cont2的高度应该相同

我试着给＃34;显示：flex＆＃34;但它没有工作.. 请帮帮我

使用jQuery我能够设置高度，但我需要使用html和css进行设置。有没有办法做到这一点？

http://fiddle.jshell.net/keshav_1007/1yvbt45b/4/ - 这是我的小提琴

注意：我有一个标题，每个div也应该来.. !!

CSS：

.row {
    display:flex;
    flex-flow:row;
}
#subdiv1,#subdiv2{
    display:table-cell;
    border:1px solid black;
}

Answer 1

首先，我不认为你应该使用没有ol或ul的LI。其次，如果你使用flex，你可能会删除一些容器和引导类。标记不必要地混乱，并且使用ID来进行样式而不是类也是不必要的，并且会使您的样式和标记变得混乱。

我相信这可以实现您的目标：

CSS：

.row {
  display:flex;
  flex-flow:row;
  align-items: stretch;
}
.list-container{
  display:flex;
  flex: 1 auto;
  border:1px solid black;
  align-items: stretch;
  flex-flow:column;
}
.list-header{
  background-color: red;
}
.stretchy-list{
  background-color: blue;
  flex: 2;
  margin: 0;
}

HTML：

<div class="row">
  <div class='list-container'>
    <div class='list-header'>
      heading1
    </div>
    <ul class='stretchy-list'>
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>d</li>
      <li>d</li>
      <li>d</li>
    </ul>
  </div>
  <div class='list-container'>
    <div class='list-header'>
      heading2
    </div>
    <ul class='stretchy-list'>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</div>

Working JSFiddle

Answer 2

制作maindivs flex容器：

#maindiv1, #maindiv2 {
    display: flex;
}

这样，细分将是maindivs的弹性项目，因此它们将被垂直拉伸以具有相同的maindivs高度。

但是，有一个问题：您使用display: table-cell。因此，细分将生成一个匿名表父，因此flex项将是匿名父项，而不是细分。

enter image description here

所以你必须删除它：

#subdiv1, #subdiv2{
    display: table-cell;
}

＆＃13;

.row {
  display: flex;
  flex-flow: row;
}
#maindiv1, #maindiv2 {
  display: flex;
}
#subdiv1,#subdiv2{
  border: 1px solid black;
}

＆＃13;

<div class="row">
  <div id="maindiv1">
    <div id="subdiv1" class="col-md-8 col-sm-8">
      <div class="panel">
        <div id="head1">
          heading1
        </div>
        <div id="cont1">
          <li>a</li>
          <li>b</li>
          <li>c</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
        </div>
      </div>
    </div>
  </div>
  <div id="maindiv2">
    <div id="subdiv2" class="col-md-8 col-sm-8">
      <div class="panel">
        <div id="head2">
          heading2
        </div>
        <div id="cont2">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

使用flex的动态div高度

2 个答案: