html - 用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

您还可以使用一些 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>