並排排列div（高度不固定）

Question

如何將兩個元素並排排列？我有一個列布局。左邊的列需要將項目對齊到頂部，右邊的列需要項目爲，並與底部對齊。

按我的例子，在這裏：http://jsfiddle.net/uBn5Z/

我試圖刪除出現，因爲這兩個不對齊的空間/間隙。在示例中，「帖子數量」和「加入日期」（位於左側欄）下方有空格。這可能是因爲指定的寬度不等於填充和邊距時的總寬度（儘管我已經研究過這種可能性）。

簽名區域的高度不是預先確定的。理想情況下，我想這樣做沒有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

Tell me if you searched this work to the signature

.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;"> 
 
\t \t \t <div style="font-size: 12px; padding: 10px 0px 0px 0px;"> 
 

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

 

 
<br><br></div> 
 
\t \t </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);