4

我在 CSS 中有一个问题：

我该怎么做：

CSS 自动宽度

当绿色 div 的内容具有（自动）500px 高度时，红色的高度相同。

当红色的内容具有（自动）700px 高度时，绿色的高度相同。

两者都有任何内容，然后我使用自动高度。

那么我怎样才能使绿色也具有与红色和红色相同的宽度，但“高度：自动；”的内容却不同？

4

4 回答 4

5

首先，阅读这篇优秀的文章。然后，检查小提琴：

http://jsfiddle.net/UnsungHero97/qUT3d/

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

CSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}​
于 2012-04-11T20:55:50.270 回答
2

我只需将两个 DIVS 包装在另一个 div 中，然后让它们在父 DIV 上碰撞，然后调整父级的大小

像这样的东西......然后使用CSS来格式化它们

<div id=parent>
    <div id=child>
      Content....
    </div>
    <div id=child>
      Content....
    </div>
</div>

其他一些解决方案可以在这里列出 http://www.ejeliot.com/blog/61

于 2012-04-11T20:33:00.633 回答
1

理想情况下，你会在两个单元格上设置一个最小高度，或者@Taeeril 的回答正确地建议使用 javascript 来等于高度。

这是使用表格显示类型的解决方案http://jsfiddle.net/SebAshton/Pj7gy/

于 2012-04-11T20:39:25.027 回答
0 
Better solution use both javascript and css.

http://codepen.io/micahgodbolt/pen/FgqLc

于 2015-05-16T08:03:05.963 回答