相同高度divs？

-1

<div class="container"> 
    <div class="sectionA"> 
    </div> 
    <div class="sectionB"> 
    </div> 
</div>

A部分为红色背景，B段有一个蓝色的背景。

A部分中有很多文字，使其非常高，B部分没有太多文字。

我该如何做到这一点，使A节和B节与父母身高相同？

来源

2013-05-04 panthro

你是指他们的父母相同的高度？每个人都有自己的身高，他们的父母有两个身高的总和。你什么意思？ – 2013-05-04 15:47:56

与父母身高相同，或与A和B身高相同？ – JJJ 2013-05-04 15:48:28

父母是容器。 – panthro 2013-05-04 15:52:20

是的，你可以给孩子和父母一样的高度。这将工作：

<html> 
<head> 
</head> 
<body> 

<div class="container"> 
    <div class="sectionA">Lorem ipsum dolor sit amet. 
    </div> 
    <div class="sectionB">Lorem ipsum dolor sit amet. 
    </div> 
</div> 

</body> 
</html>

的CSS：

.container{height:200px;width:500px;overflow:hidden} 
.sectionA{position:relative;float:left;width:250px;background:blue;height:100%} 
.sectionB{position:relative;float:left;width:250px;background:red;height:100%}

来源

2013-05-04 16:01:33

如果你不介意关于使用jQuery，

$('.sectionB').css('height', $('.sectionA').outerHeight());

sectionB CSS高度由部1. outerHeight设置。

来源

2013-05-04 16:13:23

看一看this jsbin。

希望这会有所帮助！

来源

2013-05-04 16:20:52 cortex

如果你想动态地做到这一点，我认为你需要使用jquery/javascript来处理，否则你可以使用height属性。为两部分使用合适的最高值。

来源

2013-05-04 16:24:56 newday

仿皮列效果使用<div>和CSS这样做涉及添加一个额外的元素如下

方式一：

<div class="container"> 
    <div class="backdrop"></div> 
    <div class="sectionA"> 
     <p>Text of A... can be on a red background.</p> 
     <p>Lorem ipsum dolor... and long text block.</p> 
    </div> 
    <div class="sectionB"> 
     <p>Text of B... can be on a blue background.</p> 
    </div> 
</div>

我要添加一个额外的元素<div class="backdrop">，你如果需要，可以用伪元素替代。

相应的CSS如下：

.container { 
    overflow: hidden; 
    color: white; 
    background-color: red; 
    position: relative; 
} 

.sectionA { 
    float: left; 
    width: 48%; 
    padding: 1%; 
} 
.sectionB { 
    float: left; 
    width: 48%; 
    padding: 1%; 
    position: relative; 
    z-index: 2; 
} 

.backdrop { 
    position: absolute; 
    background-color: blue; 
    width: 50%; 
    height: 3000px; 
    top: 0; 
    left: 50%; 
    z-index: 1; 
}

父.container元件被赋予背景颜色为左手侧柱（红色），具有overflow: hiddenposition: relative和。

使用float: left放置两个子/列元素，并给定相对宽度为48％和填充1％（您可以根据需要调整这些度量值）。

最后，.backdrop被绝对定位并放置在父容器的右侧。我把它设置得很高，以确保它伸展超过任何两列的任何预期高度，并声明background-color: blue。

使用z-index将浮动的.sectionB移动到.backdrop以上。请注意，您需要相对设置位置.sectionB以便z-index值生效。

由于.container使用overflow:hidden，高大的背景元素会被裁剪，因此您可以达到所需的效果。

使用背景图像也可以工作。您可以创建一个背景图像，左侧为红色，右侧为蓝色，并且垂直平铺顶部和中间位置，使宽度足够宽，以适应任何预期的页面宽度。

使用div.backdrop的主要优点是，您可以在不更改背景图像的情况下单独使用CSS属性更改颜色方案。

小提琴演示：http://jsfiddle.net/audetwebdesign/yejss/

来源

2013-05-04 21:54:43

相同高度divs？

回答

相关问题