0

今朝、私はこれにかなり苦労しました。私は、最近の作業のセクション、仕切り、および最近のブログ投稿のセクションを水平に並べたWPテーマになるものを作成しています。物事はうまく形作られ始めていますが、右端のセクションは押し下げられ続けています。幅の問題ではないと思います。a）十分なスペースがあるようで、b）さまざまな幅やパディングに何をしても、問題は解決しません。フロートと関係があるように感じますが、トラブルシューティングの方法がわかりません。

とにかく、これが私が見ているものです： 現在

ページの中央に仕切りが完全に配置された、次のようなものにしたいと思います。

コンテンツコンテンツコンテンツ| コンテンツコンテンツコンテンツ

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

#recent .divider {
}

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

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

#recent #recent-work a {
    padding-bottom: 40px;
    padding-right: 20px;
}

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

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

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

#recent #recent-blog a {
    padding-bottom: 40px;
    padding-left: 20px;
}

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

と

<div id="recent">
    <div id="recent-work">
           <p><span>Recent Work</span></p>
           <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
               <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
               <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
    </div><!-- end recent-work -->

    <div class="divider">
        <img src="img/divider.png" alt="Section divider" />
    </div><!-- end divider -->

    <div id="recent-blog">
        <p><span>Recent Blog</span></p>
            <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
            <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
            <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
       </div><!-- end recent-blog -->
</div><!-- end recent -->
4

5 に答える 5

1

仕切りのフロートを設定していないようです。追加：

#recent .divider {
display: block; 
float: left;
}

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

念のため、すべての div に display: block プロパティを追加する必要があります。

ここに例を示します(ビューポートが十分に大きくなるように左側の部分をスライドさせます)

于 2012-06-18T15:35:04.253 に答える
1

最初にGoogle検索をお勧めします。上位の結果のいずれかをニーズに合わせて調整できるようです.

もちろん、最も単純で最も堅牢なアプローチは、TABLE を使用することです。TABLE は、簡単に正しく設定でき、過去 10 年間のすべてのプラットフォームで正しく動作します。また、非常に大きなズーム レベルなどの極端な設定が必要なユーザーに対しても適切に劣化します。また、壊れた IE バージョンを修正するための凝った CSS、HTML5、またはオーバーライドも必要ありません。

テーブルに基づくRorok_89の回答の私のバージョン。実は、私が言ったように「最も単純」ではないかもしれません。CSS はより単純ですが、HTML にはさらにいくつかの文字があります。CSS は例よりも単純にすることができることに注意してください。

于 2012-06-18T15:42:44.903 に答える
0

多分別のアプローチを提案してもいいですか？

ここでは表を使用すると非常に便利なので、<tr>と<td>タグを使用して要素を簡単に整列させます。

ただし、テーブルを使用したくない場合は、いつでも position: absolute と position with margin and paddings を使用できます。

于 2012-06-18T15:33:24.920 に答える
0

float: left;#recent-blog にも使ってみてください。と：

#recent .divider {
    float: left;
}
于 2012-06-18T15:35:52.523 に答える
0

これを最近のdivに試してください

white-space:nowrap;
于 2012-06-18T15:39:52.073 に答える