Question

我试着推荐以下内容：

enter image description here

使用此代码：

<div style="height: auto;">
     <div class="box">
        <div style="height: 300px;"></div>
     </div>
     <div class="box auto-height">
        asdasd
     </div>
    <div class="box auto-height">
        asdasd
    </div>
</div>

以下CSS：

.box {
    width: 45%;
    background-color: green;
    border: 1px solid red;
    float: left;
}

.auto-height {
    height: 50%;
}

盒子将循环播放，第一个盒子总是比其他盒子大。所以我基本上希望第一个总是在左边，剩下的那个在右边。

我试过http://jsfiddle.net/59bwh/，但我无法达到高度：50％正在工作。

然而，右侧的方框可能超过2（最多5个）。

PP：对不起标题（我在谷歌搜索过，找不到任何东西，像我这样的人可能会搜索同一个，所以我把它写成标题）。如果你有任何建议，我会编辑它。

Answer 1

你必须使用绝对定位。

.wrap {
    position: relative;
}
.box {
    width: 45%;
    background-color: green;
    border: 1px solid red;
/*    float: left; */
}
.fixd {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 50%;
}
.fixd + .fixd {
    top: 50%;
    bottom: 0;
}

工作Fiddle。

重要的是父元素的属性position: relative;的定义。第一个元素定义父级的高度。第二个和第三个元素绝对位于父级内部。您可以按top和bottom属性定义元素的高度。

如果未修复右侧元素的数量，则必须通过JavaScript计算大小。

最简单的JavaScript应该是这样的：

$('.fixd').css('height', $('.fixd').parent().innerHeight() / $('.fixd').size());

在真实的应用程序中，你必须做一些修正（填充，边距，边框）。然后你的小提琴的脚本应该是这样的

var height = $('.fixd').parent().innerHeight(),
    count = $('.fixd').size(),
    boxSize = 0;

// Correction of borders and margin-top size
height = height - count * 2 - (count-1) * 10;
boxSize = Math.floor(height/count);

// set computed size
$('.fixd').css('height', boxSize)
   .first().css('margin-top', 0);

// fix last element (it is because of rounding floating numbers)
$('.fixd').last().css('height', height-(count-1)*boxSize);

完整的小提琴是here

Answer 2

我知道这并没有回答你的问题，但这对你来说非常有用。

http://css-tricks.com/rotating-feature-boxes/

如果您不想使用插件，请尝试此操作...

<div id="container">
     <div class="left">
          <div class="box">
          </div>
     </div>
     <div class="right">
          <div class="box-auto-height">
          </div>
          <div class="box-auto-height">
          </div>
     </div>
</div>

和css：

#container{
width:100%;
margin:auto;
display:block;
height:100%;
}

.left{
width:50%;
height:100%;
padding:10px;
float:left;
}

.right{
width:50%;
height:100%;
padding:10px;
float:left;
}

.box-auto-height{
width:100%;
height:50%;
}

div img{
max-width:100%;
height:auto;
}
}

Answer 3

你问过在评论中使用表格......

http://jsfiddle.net/59bwh/12/

<table style="width:90%" border="1" cellpadding="0" cellspacing="0">
<tr>
    <td rowspan="2" style="height: 300px;">Cell 1</td>
    <td>Cell 2</td>
</tr>
<tr>
    <td>Cell 3</td>
</tr>

Answer 4

修正了你的小提琴：

http://jsfiddle.net/59bwh/9/

.box {
    width: 50%;
    background-color: green;
    border: 1px solid red;
    box-sizing: border-box;
}

.fixd1 {
    position:absolute;
    top:0;
    right:0;
    bottom:50%;
}
.fixd2 {
    position:absolute;
    top:50%;
    right:0;
    bottom:0;
}



<div style="position:relative">
    <div class="box">
        <div style="height: 400px;"></div>
    </div>
    <div class="box fixd1">
        asdasd
    </div>
    <div class="box fixd2">
        asdasd
    </div>
</div>

Answer 5

50％的身高来自父母，而不是兄弟。

<div id="wrapper">
   your boxes goes here
</div>

然后CSS将是

.wrapper { height: 300px }
.box { height: 100% }
.auto-height { height: 50% }

第一个div总是在左边，剩下的在右边 - 用css定位

5 个答案: