0

ページの途中に2つのセクションがあるWPテーマを作成しています。左側が「最近の作業」、右側が「最近のブログ投稿」になります。「最近のブログ投稿」をページの真ん中で始めたいのですが。コンテナの水平方向の中点と整列するのは左端です。また、2つを区切る縦線があるようにしたいと思います。マージンとパディングで遊んだのですが、目的の効果が得られないようです。これが私が目指しているものの画像です： 理想

<div id="recent">
    <div id="recent-work">
            <p><span>Recent Work</span></p>

    <div class="next">
        <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
    </div><!-- end next -->
    </div><!-- end recent-work -->
    <div id="recent-blog">
        <p><span>Recent Blog</span></p>

    <div class="next">
        <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
    </div><!-- end next -->
    </div><!-- end recent-blog -->
</div><!-- end recent -->

と

#recent {
    border-top: 1px solid #202020;
    padding-bottom: 40px;
    padding-top: 40px;
}

#recent #recent-work {
    float: left;
}

#recent #recent-work .next{
    float: right;
}

#recent #recent-work p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#recent #recent-blog {
    float: right;
}

#recent #recent-blog .next{
    float: right;
}

#recent #recent-blog p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

私は昨日からこれに苦労してきましたので、どんな助けでも大歓迎です。

@Praveen 変更

4

2 に答える 2

1

CSSに次の行を追加してください：

#recent #recent-work p {text-align: center;}

アップデート：

私はこれを追加しました：

#recent #recent-work p, #recent #recent-blog p {text-align: center;}

</ p>

于 2012-06-18T14:02:14.593 に答える
0

私がこれを正しく持っていることを願っています-

実例-デモ

HTML

<div class="wrap">
<div class="leftCont">
    <div class="leftEle"></div>
    <div class="leftEle"></div>
    <div class="leftEle"></div>
</div>
<div class="rightCont">
    <div class="rightEle"></div>
    <div class="rightEle"></div>
    <div class="rightEle"></div>
</div>
</div>​

CSS-

.rightCont , .leftCont{
width:50%;
float:left;
background-color:green;
min-width:340px;
}
.wrap{
padding-top:20px;
width:100%;
min-width:600px;
height:150px;
overflow:hidden;
background-color:black;
}
.leftEle , .rightEle{
width:30%;
border:2px solid black;
min-width:100px;
float:left;
background-color:yellow;
height:100px;
}

</ p>

于 2012-06-18T14:16:11.757 に答える