1

2 つの要素を並べて配置するにはどうすればよいですか? 私は列のレイアウトを持っています。左側の列では項目を上に揃える必要があり、右側の列では項目を下に揃える必要があります。

私の例によると、ここ: http://jsfiddle.net/uBn5Z/

2つが整列していないために表示されるスペース/ギャップを削除しようとしています。例では、「投稿数」と「参加日」(左の列) の下にスペースがあります。これは、パディングとマージンが考慮されたときに指定された幅が合計幅と等しくないことが原因である可能性があります (私はその可能性を調べましたが)。

署名領域の高さは、あらかじめ決められたものではありません。理想的には、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>

署名の前に clear:both を付けます。

于 2013-10-28T19:07:50.910 に答える