html – 制作两个相同大小的div

2023年4月29日 250次阅读

我连续两列.我希望行的高度为较小列的高度,较大的列可以滚动.是否可以不使用
javascript？

<div class="row">


  <div class="col-md-8">

    <span style="color:white">Wash-type</span>
    <form>
      <!-- dummy data-->
      <label class="customCheckbox">
        <input type="radio" name="r1" value="r1"><span>Option 1</span></label>
      <label class="customCheckbox">
        <input type="radio" name="r1" value="r2"><span>Option 2</span></label>
      <label class="customCheckbox">
        <input type="radio" name="r1" value="r2"><span>option 3</span></label>
      <label class="customCheckbox">
        <input type="radio" name="r1" value="r2"><span>Option 4</span></label>
    </form>


  </div>

  <div class="col-md-4" style="oveflow:scroll;">
    <div class="table-responsive">
      <table class="table">
        <thead>

          <tr>
            <th>#</th>
            <th>Service Option</th>
            <th>Price</th>

          </tr>

        </thead>
        <tbody>

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

  </table>

</div>

最佳答案 这是JS解决方案,如果你找不到其他的
https://jsfiddle.net/2Lzo9vfc/21/

JS

$(window).resize(setHeight);
$(document).ready(setHeight);

function setHeight() {
    var height = $('.left').height();
    $('.row, .right').height(height);
}

CSS

.right {
    overflow-y: scroll;
}

HTML

    <div class="row">


    <div class="col-md-8 left">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!</p>

        <span style="color:white">Wash-type</span>
        <form>
            <!-- dummy data-->
            <label class="customCheckbox"><input type ="radio"  name="r1" value="r1"><span>Option 1</span></label>
            <label class="customCheckbox"><input type ="radio" name="r1" value="r2"><span>Option 2</span></label>
            <label class="customCheckbox"><input type ="radio" name="r1" value="r2"><span>option 3</span></label>
            <label class="customCheckbox"><input type ="radio" name="r1" value="r2"><span>Option 4</span></label>
        </form>


    </div>

    <div class="col-md-4 right">
        <div class="table-responsive">
            <table class="table">
                <thead>

                    <tr>
                        <th>#</th>
                        <th>Service Option</th>
                        <th>Price <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!</p> </th>

                    </tr>

                </thead>
                <tbody>

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

    </table>

 </div>
点赞