1

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

按照我的例子，这里：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>

4

3 回答 3

0

告诉我你是否搜索过这个作品的签名

.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>

我在你的签名前写了一个明确的：都。

于 2013-10-28T19:07:50.910 回答
0

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

我使用了一些 jquery 来使两列的高度相等，基于哪个最大。

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

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

然后我使用绝对定位将您的用户信息和签名粘贴到各自列的底部。

#col1 {
    position: relative;
}

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

有两个额外的 jquery 位为您的 .userinfo 和 .signature 腾出空间，但如果您始终知道这些元素的高度，则可以将其删除。

编辑：我刚刚意识到你不想查询我所做的元素的高度，所以很抱歉。这是我能找到的最简单的方法。

让我知道你的想法。

于 2013-10-29T12:21:04.773 回答
-1

使用 jQuery

var blogHeight = $('.blog-single-post').height();
$('.right-sidebar').css('height',blogHeight);
于 2016-06-10T19:17:14.590 回答