如何并排排列两个元素？我有一个列布局。左侧的列要求项目与顶部对齐，右侧的列要求项目与底部对齐。
根据我的例子，这里：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>
答案 0 :(得分：0)
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;">
<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>
我在你签名之前说清楚了。
答案 1 :(得分：0)
以下是我的解决方案： 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腾出空间，但是如果你总是知道这些元素的高度，就可以删除它们。
编辑：我刚刚意识到你不想查询我所做的元素的高度，所以很抱歉。这是我能找到的最不实用的方式。
让我知道你的想法。
答案 2 :(得分：-1)
chrome.notifications.onClicked.addListener(function(notificationId){
if (notificationId == "noti1"){
alert("test1");
} else if (notificationId == "noti2"){
alert("test2");
});