Question

早上好

我没有弄清楚该如何layout。也许有人可以帮忙？

我试图用那些技巧来做到这一点，但是那没有用

    <div class="row row-eq-height">
      <div className='col-md-2'>
        height = 3*y
      </div>
      <div className='col-md-10 '>
        <div>
          A  - height = y
        </div>
        <div>
          B - height = y
        </div>
        <div>
          C - height = y
        </div>
      </div>
    </div>

.css

    .row-eq-height {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }

谢谢您的帮助！!!!

Answer 1

answer

.css

li3 {
  display: flex;
  justify-content: left;
  align-items:center;
  width: 100%;
  height: 33.33333%;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.js

<div class="row row-eq-height">
  <div className='col-md-2'>
    height = 3*y<br/>
    height = 3*y<br/>
    height = 3*y<br/>

    height = 3*y<br/>
    height = 3*y<br/>
    height = 3*y<br/>

    height = 3*y<br/>
    height = 3*y<br/>
    height = 3*y<br/>
  </div>
  <div className='col-md-10 '>
    <li3>
      A  - height = y
    </li3>
    <li3>
      B - height = y
    </li3>
    <li3>
      C - height = y
    </li3>
  </div>
</div>

boostrap-等于列高&&等于行嵌套列内的高度

1 个答案: