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

您可以使用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 2

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

＆＃13;

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';

＆＃13;

.left-side {
    background-color: green;
    height: auto;
}

.right-side-up {
    background-color: red;
    height:100px;
}

.right-side-down{
    background: blue;
    height: 80px;
}

＆＃13;

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

＆＃13;

或者您也可以使用Flexbox

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

这里该怎么做：

从row移除<div class="row right-side">或更改名称以避免冲突
然后将以下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%;
}

/ *此处添加的Block Stops * /

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

Answer 4

如果我正确理解了这个问题，只需在.right-side-up添加一个边距，就像这样：

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

这是fiddle。

用css创建相等高度的两列

4 个答案: