平行对齐div(高度不固定)

Question

如何使两个元素并排对齐？我有一个列的布局。左边的列要求项与顶部对齐，右边的列要求项与底部的对齐。

如我的示例所示，这里：http://jsfiddle.net/uBn5Z/

我正试图消除由于两者不对齐而出现的空间/空白。在示例中，在“posts数量”和“联合日期”(左列)下面有空格。这可能是因为在考虑填充和边距时，指定的宽度并不等于总宽度(尽管我已经研究过这种可能性)。

签名区域的高度不是预先确定的。理想情况下，我希望在不使用jquery计算高度(然后使用负定位值)的情况下这样做。

<div class="wrap" id="post_1">
<div id="container2">
    <div id="container1">
        <div id="col1">
            <!-- col1 content -->
        </div>
        <div id="col2">
            <!-- col2 content -->
        </div>
        <!-- The item here needs to be aligned to the bottom in relation to itself and also col1 -->
    </div>
</div>

Answer 1

告诉我你是否把这件作品搜到签名

​

.wrap {
    width:950px;
    clear:both;
    font-family:"Segoe UI", "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
    font-size:13px
}
#container2 {
    clear:left;
    float:left;
    width:100%;
    overflow:hidden;
    background-color:#EBF0F5;
    border-right:1px solid #9AB2D0;
    border-left:1px solid #9AB2D0;
    border-top:1px solid #9AB2D0
}
a.counter:link, a.counter:visited, a.counter:active {
    color:#1C66AB;
    text-decoration:none;
    font-family:"Segoe UI", "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
    font-size:13px;
    font-weight:400
}
a.counter:hover {
    text-decoration:underline
}
.icons {
    text-align:right;
    border-bottom:1px solid #CBCBCB;
    padding:5px 4px 8px 0;
    margin-bottom:9px
}
#container1 {
    float:left;
    width:100%;
    border-left:1px solid #9AB2D0;
    position:relative;
    right:-170px;
    background-color:#fff
}
#col1 {
    float:left;
    width:170px;
    position:relative;
    left:-170px;
    overflow:hidden
}
#col2 {
    float:left;
    width:766px;
    position:relative;
    left:-170px;
    overflow:inherit
}
div#form-wrapper {
    font-family:"Segoe UI", "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    padding-top:45px;
    padding-bottom:20px;
    vertical-align:top;
    clear:both
}
.profiletext {
    padding:10px 0 0;
    font-family:'Trebuchet MS', Helvetica, Arial, sans-serif;
    font-size:13px;
    font-weight:700
}
.usertitle {
    font-family:'Trebuchet MS', Helvetica, Arial, sans-serif;
    font-size:13px;
    font-weight:600
}
.colmask {
    position:relative;
    clear:both;
    float:left;
    background-color:#fff;
    font-size:13px;
    font-family:"Segoe UI", "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
    width:952px;
    overflow:hidden
}
.gilead-right {
    padding:9px 12px 12px 11px;
    font-size:13px;
    position:relative;
    line-height:21px
}
.gilead-left {
    padding:10px 10px 7px 12px
}
.body-message {
    word-wrap: break-word;
    padding-bottom:9px;
    padding-right:6px
}
.body-message img {
    max-width:750px
}
.wrap .icons input {
    width:13px;
    height:14px;
    margin:0 0 0 3px;
    vertical-align:middle;
    position:relative;
    top:-3px;
    *overflow:hidden
}

<div class="wrap" id="post_1">
    <div id="container2" style="float:left;">
        <div id="container1">
            <div id="col1">
                <div style="min-height: 140px; padding: 8px 0px 0px 9px;"> <span class="profiletext"><strong><a href="/"><span style="font-weight: bold; color: #4B71A0;">User One</span>

                    </a>
                    </strong>
                    </span>
                    <br> <span class="usertitle">This is a usertitle</span>

                    <br>
                    <div style="padding-top: 8px;">
                        <img src="" alt="" title="" width="150" height="20">
                        <br>
                    </div>
                    <div style="padding-top: 7px;">
<a href=""><img src="" alt="" width="150" height="150"></a>

                    </div>
<span style="color: #8C8C8C; line-height: 19px;">
			<div style="font-size: 12px; padding: 10px 0px 0px 0px;">

	Posts: 12,047<br>
	Joined: November 2003
	


<br><br></div>
		</span>

                </div>
            </div>
            <div id="col2">
                <div style="width: 100%; font-size: 100%; line-height: 20px; padding: 0px 12px 12px 13px;">
                    <div class="icons">
                        <div style="color: #8C8C8C; float: left; padding-top: 5px;">01-01-2013 00:00 AM <span class="smalltext"><strong><a href="" class="counter">#1</a></strong></span>

                        </div>
                        <div style="padding-top: 2px;">This space is intended for buttons and tools</div>
                    </div>
                    <div class="body-message">This is an example sentence. This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.                   </div>
                </div>
            </div>
          <div style="clear:both"></div>
            <hr size="1" align="left" width="100%" style="margin-left: 13px; background-color: #CBCBCB;">
            <div style="width: 750px; line-height: 1.5; padding: 0px 0px 8px 13px;">
<span style="word-wrap: break-word; bottom: 0; left: 0;">
<span style="color: #666666; padding-top: 4px;">Test signature.
</span>
</span>
            </div>

​

我说得很清楚:都是在你签字之前。

Answer 2

这是我的解决方案：http://jsfiddle.net/v5gKJ/2/。

我使用了一些jquery，使两列的高度相等，这是最大的。

if ($("#col1").height()<=$("#col2").height()) 
{
    $("#col1").height($("#col2").height());
}

else
{
    $("#col2").height($("#col1").height());

然后，我使用绝对定位将您的userinfo和签名粘贴到它们各自列的底部。

#col1 {
    position: relative;
}

.userinfo {
    position: absolute;
    bottom: 0;
}

还有两部分jquery为您的.userinfo和.signature腾出了空间，但是如果您始终知道这些元素的高度，则可以删除它们。

编辑:我刚刚意识到你不想询问我所做的元素的高度，所以我很抱歉。这是我能找到的最不麻烦的方法了。

让我知道你的想法。

Answer 3

使用Jquery

var blogHeight = $('.blog-single-post').height();
$('.right-sidebar').css('height',blogHeight);