使用 css 创建等高的两列

Question

我想创建等高的两列，右边的两列将跟随左边的高度列。

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.left-side {
   background-color: green;
   height: auto;
}

.right-side-up {
    background-color: red;
    height:100px; //ignore this value, if u have other way
}

.right-side-down{
   background: blue;
   height: 80px; //ignore this value, if u have other way
}

The same code on JsFiddle

Answer 1

如果我对问题的理解正确，只需在 .right-side-up 中添加边距，如下所示：

.right-side-up {
    margin-top:20px; // Or margin-bottom:20px;
    background-color: red;
    height:100px;
}

这里是fiddle.

Answer 2

您可以使用 jquery

来实现

您需要使用 jquery 和

 <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
     $(document).ready(function () { 
    var maxheight = Math.max($(".left-side").height(), $(".right-side").height());

    $(".right-side,.left-side").css("height", maxheight);
    });
    </script>

这是 jsbin 示例： http://jsbin.com/vobekavega/1/

Answer 3

您还使用一些 JavaScript 来定义左右两侧的高度相等。

var leftSide = document.querySelector('.left-side');
var rightSide = document.querySelector('.right-side');
var hLeftSide = leftSide.clientHeight;
var hRightSide = rightSide.clientHeight;

var maxH = Math.max(hLeftSide, hRightSide);

leftSide.style.height = maxH + 'px';
rightSide.style.height = maxH + 'px';

.left-side {
    background-color: green;
    height: auto;
}

.right-side-up {
    background-color: red;
    height:100px;
}

.right-side-down{
    background: blue;
    height: 80px;
}

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
        
       
              <div class="col-xs-9 left-side">
                <p>sdfsdf</p>
                <p>sdfsdf</p>
                <p>sdfsdf</p>
                <p>sdfsdf</p>
              </div>
            <div class="row right-side">
               <div class="col-xs-3 right-side-up">
                asdfdf
               </div>
            
               <div class="col-xs-3 right-side-down">
                asdfdf
               </div>
            </div> <!-- close row -->
          
        
</div>

或者你也可以使用 Flexbox

.flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.left-side,
.right-side {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.left-side {
    background-color: green;
    height: auto;
}

.right-side-up {
    background-color: red;
    height:100px;
}

.right-side-down{
    background: blue;
    height: 80px;
}

.row.no-padding,
.col-xs-3.no-padding,
.col-xs-9.no-padding {
  padding-left: 0;
  padding-right: 0;
}

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="row no-padding flexbox">
        
       
              <div class="col-xs-9 no-padding left-side">
                <p>sdfsdf</p>
                <p>sdfsdf</p>
                <p>sdfsdf</p>
                <p>sdfsdf</p>
              </div>
            <div class="col-xs-3 no-padding right-side">
               <div class="col-xs-12 right-side-up">
                asdfdf
               </div>
            
               <div class="col-xs-12 right-side-down">
                asdfdf
               </div>
            </div> <!-- close row -->
          
        
</div>

Answer 4

这里要做什么：

从 <div class="row right-side"> 中删除 row 或更改名称以避免冲突
然后将下面的 3 个方块添加到您的 css

/* 添加的块从这里开始 */

.right-side-up, .right-side-down {
    width: 100%;
}
.row {
    display: inline-flex;
    width: 100%; /* Adjust as needed */
}

.left-side, .right-side {
  display: inline;
    width: 50%;
}

/* 添加的块在这里停止 */

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 .row {
  display: inline-flex;
  width: 100%
}
.left-side,
.right-side {
  display: inline;
  width: 50%;
}
.left-side {
  background-color: green;
}
.right-side-up,
.right-side-down {
  width: 100%;
}
.right-side {
  background-color: orange;
}
.right-side-up {
  background-color: red;
  height: 100px;
}
.right-side-down {
  background: blue;
  height: 80px;
}

<div class="row">


  <div class="left-side">
    <p>sdfsdf</p>
    <p>sdfsdf</p>
    <p>sdfsdf</p>
    <p>sdfsdf</p>
  </div>


  <div class="right-side">
    <div class="col-xs-1 right-side-up">
      asdfdf
    </div>

    <div class="col-xs-1 right-side-down">
      asdfdf
    </div>
  </div>
  <!-- close row -->


</div>

使用 css 创建等高的两列

Create equal height two column with css

html

css

height