Question

我正在使用Gentelella bootstrap模板，我的某个面板的高度有问题。

问题是左x_panel的高度小于右{}。这些面板之间的不同之处在于左边的元素包含svg元素，而右边的元素包含canvas chart.js元素。如何设置高度相等？

    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="x_panel">
          <div class="x_title">
            <h2>Title of the chart<small>Sub-title</small></h2>
            <div class="clearfix"></div>
          </div>
          <div class="x_content">
            <svg class="company"></svg>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="x_panel">
          <div class="x_title">
            <h2>Title of the chart <small>Sub-title</small></h2>
            <div class="clearfix"></div>
          </div>
          <div class="x_content">
            <canvas id="mybarChart"></canvas>
          </div>
        </div>
      </div>
    </div>

更新：

Answer 1

试试这个

<强> fiddle link with your code

您还可以使用

.child {
  width:50%;
  border: 1px solid;
}

＆＃13;

.box {
  display: flex;
  width: 100%;
}

.child {
  flex: 1 0 50%;
   /*width:50%;*/   /* You can use width instead of flex */
  border: 1px solid;
}

＆＃13;

<div class="box">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea temporibus officia vel, placeat quisquam ipsum a perspiciatis ex sit nobis adipisci ab ipsam vitae esse fugit accusamus eum iure provident.
  </div>
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi tempore nihil
  </div>
</div>

＆＃13;

使用Bootstrap和您的代码。

＆＃13;

.box {
  display: flex;
  width: 100%;
}

.child {
  border: 1px solid;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
  <div class="box">
  </div>
  <div class="col-md-6 col-sm-6 col-xs-12">
    <div class="child">
      <div class="x_panel">
        <div class="x_title">
          <h2>Title of the chart<small>Sub-title</small></h2>
          <div class="clearfix"></div>
        </div>
        <div class="x_content">
          <svg class="company"></svg>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6 col-xs-12">
    <div class="child">
      <div class="x_panel">
        <div class="x_title">
          <h2>Title of the chart <small>Sub-title</small></h2>
          <div class="clearfix"></div>
        </div>
        <div class="x_content">
          <canvas id="mybarChart"></canvas>
        </div>
      </div>
    </div>
  </div>

＆＃13;

Answer 2

使用您的代码

＆＃13;

.row {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.row>div {
  background-color: lightblue;
  border: thin solid black;
}

＆＃13;

<div class="row">

  <div class="col-md-6 col-sm-6 col-xs-12">
    <div class="x_panel">
      <div class="x_title">
        <h2>Title of the chart<small>Sub-title</small></h2>
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <svg class="company"></svg>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-sm-6 col-xs-12">
    <div class="x_panel">
      <div class="x_title">
        <h2>Title of the chart <small>Sub-title</small></h2>
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <canvas id="mybarChart"></canvas>
      </div>
    </div>
  </div>

</div>

＆＃13;

如何设置列的高度相等？

2 个答案: