Question

<html>
    <head></head>
    <body>
        <div>
            <div style="float: left; width: 300px; border: 1px solid black;">
                testomgsgo<br/>
                testete<br/>
                testete<br/>
                testete<br/>
                testete<br/>
            </div>
            <div style="float: left; width: 300px; border: 1px solid black;">
                <div style="background: #FF0000; width: 50px; height: 50px; margin-left: auto;"></div>
            </div>
            <div style="clear: both"></div>
        </div>
    </body>
</html>

使用上面的代码，左侧将具有可变内容，我需要右手div（红色框）中的div到底部的位置，因此其底边与左div高度的底部齐平。

我尝试使用自动上边距但我相信问题是我无法获得右边div的高度以匹配左边div。

有没有办法用CSS来做这个或者我是否必须使用javascript来匹配高度？

Answer 1

这是你要找的吗？

http://jsfiddle.net/7b3Pc/

基本上，变量div通过其父div控制所有其他同级div的高度。兄弟姐妹绝对定位，身高：100％。

<html>
    <head></head>
    <body>
        <div>
            <div style=" width:600px; border: 1px solid black; position:relative">
                <div style="width: 300px;">
                testomgsgo<br/>
                testete<br/>
                testete<br/>
                testete<br/>
                testete<br/>
            </div>
                <div style="width: 300px; height:100%; position:absolute; top:0;left:300px; border: 1px solid black;">
                    <div style="background: #FF0000; width: 50px; height:100%; margin-left: auto;">
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 2

这是您要找的东西：http://jsfiddle.net/htfRw/

在Safari，Firefox

中测试

修改

此处位于容器内：http://jsfiddle.net/htfRw/2/

Answer 3

你试过了吗

margin-top: 0;

Answer 4

你根本不需要在这里使用float。我建议改为使用display: inline-block，因为您可以依靠vertical-align属性垂直定位第二个<div>，而不是使用margin。

HTML：

<div>
    testomgsgo<br/>
    testete<br/>
    testete<br/>
    testete<br/>
    testete<br/>
</div><div class="second">
    <div></div>
</div>

请注意，结算</div>和<div class="second">之间没有空格。因为这两个元素都是内联元素，所以标记中的任何空格都会导致两个元素之间存在小的水平空间。

CSS：

body > div {
    width: 300px;
    border: 1px solid #000;
    vertical-align: bottom;
    display: inline-block; }
.second div {
    background: #FF0000; 
    width: 50px; 
    height: 50px; }

预览：http://jsfiddle.net/Wexcode/FwD3Q/

左浮等高

4 个答案: