css - 如何使两个右div的高度等于左div的高度 [英] css - How do I make the height of two right divs equal the height of the left divs

问题描述

我有一个网站，分为两类：左和右。左边有3个盒子，右边有一个。右侧高度的框将伸展或收缩，以与左侧框的高度的和相同。我在右边的盒子下面添加了另一个盒子，我想用两个盒子获得相同的效果（右边两个盒子的高度总和应该总是等于左边三个盒子的高度总和。这是在右边一个框中使用的旧代码：

I have a site that is divided into two classes: right and left. The left had 3 boxes in it and the right had one. The box on the right's height would stretch or shrink to be the same as the sum of the height's of the left boxes. I have added another box underneath the box on the right and I want the same effect now with the two boxes (the sum of the height of the two boxes on the right should always equal the sum of the height of the three boxes on the left. Here is the old code that worked with the one box on the right:

<div class="right">
    <div class="boxx details-history">
        <div class="boxx-content">
            Box content goes here
        </div>
    </div>
</div>

css：

.right{ float: right; display: inline; width:404px; position:relative; }
.boxx { margin-top:11px;  }
.boxx:first-child { margin-top:0;  }
.boxx .boxx-content { background: #fff; padding:4px 18px; color:#a7a7a7;
  font-family: 'Roboto', sans-serif; font-weight:300; border-radius: 0 0 3px 3px; }
.details-history .boxx-content { padding: 0 0 0 0!important; position:absolute; 
   left:0; right:0; bottom:0; top:22px; }

以下是新代码：

<div class="right">
    <div class="boxx details-history">
        <div class="boxx-content">
            Box content goes here
        </div>
    </div>
    <div class="boxx details-coursework">
        <div class="boxx-content custom-scroll">
            Box content goes here
        </div>
    </div>
</div>

我一直在尝试几个小时写一些css来使这项工作，但我可以似乎得到它的权利。我认为这个伎俩与取得位置：绝对，出于.details历史，并把它放到一个新的类，详细的课程，但我无法弄清楚究竟该做什么。

I've been trying for several hours now to write some css to make this work, but i can't seem to get it right. I think the trick has something to do with taking the 'position: absolute;' out of .details-history and putting it into a new class called details-coursework, but i can't figure out exactly what to do.

推荐答案

只有这样我才能看到这个工作没有JS是设置所有元素的高度

Only way I can see this working without JS is to set heights for all the elements

<div class="wrapper">
    <div class="left">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
    <div class="right">
        <div class="one"></div>
    </div>
</div>

CSS

CSS

.left {
    width : 50%;
    height : 1000px;
    background : rgba(0,0,200,0.1);
    float : left;
}

.right {
    width : 50%;
    height : 1000px;
    background : rgba(200,0,0,0.1);
    float : right;
}

.left div {
    margin : auto;
    margin-top : 20px;
    width : 90%;
    height : 100px;
    background : rgba(200,0,0,0.1);
    border : #FFFFFF 1px solid;
}

.right .one {
    margin : 20px auto;
    width : 90%;
    height : 344px;
    background : rgba(200,0,0,0.1);
    border : #FFFFFF 1px solid;
}

查看此小提琴

这篇关于css - 如何使两个右div的高度等于左div的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！