5

私はこれを持っています:

<div class="listing-thumbnail"><a href="http://domain-name.com/thislisting/"><img 

class="wpbdmthumbs" src="http://domain-name.com/wp-

content/uploads/2013/04/dancegroup-300x300.jpg" style="max-width: 300px;"/></a>
</div>

<div class="listing-details">

    <div class="field-value wpbdp-field-endmonth meta"><span 

class="value">March</span></div>

    <div class="field-value wpbdp-field-enddaynumber meta"><span 

class="value">10</span></div>

    <div class="field-value wpbdp-field-citystatezip meta"><span 

class="value">Northampton, Massachusetts 01060</span></div>

</div>

次のように表示されます。

|画像....| 3 月 10 日 マサチューセッツ州ノーザンプトン 01060
|..............|
|________________|

しかし、私はそれを次のように表示したい:

|画像....| 3月10日
|…………| 01060 マサチューセッツ州ノーサンプトン
|_______________|

すべてのフィールドは、WP データベース エントリから動的に取得されます。

現在、3 月のフィールドとその前の他の日付関連フィールドの css は、それらを同じ行に並べるために、フィールドごとに次のようになっています。

#content .wpbdp-listing .wpbdp-field-endmonth .wpbdp-field-enddaynumber .value { float: left; }

私の質問は、どの css を適用してcity-state-zipdiv を発生させることができ、それに続くものは、日付情報と同じ行ではなく、日付情報の下の次の行から開始できますか?

divに続くフィールドはcity-state-zip適切に動作し、すべてが独自の行で始まることに注意してください。

float:left列ではなく同じ行にすべての日付フィールドを取得するように追加しました。

これらの div はすべて、さらに別の div 内にあります。そのまま、日付要素用にフロートを追加しないと、すべての要素がページの垂直方向に次々と並んでいます。

each に続く divcity-state-zipは、新しい行で始まります。city-state-zip要素を1行にまとめたい。

clear: left次のように、これらの div の左側に画像があり、その下に都市の div がプッシュされているため、 andclear: allがうまくいかないことに注意してください。

|画像....| 3月10日
|…………|
|________________|
01060 マサチューセッツ州ノーサンプトン

4

2 に答える 2

7

クラス フィールド値で使用clear:both;wpbdp-field-citystatezip

于 2013-04-22T04:17:50.027 に答える
1

都市/州/郵便番号を含む要素で display: ブロックを使用して、新しい行を開始させることができます。日付フィールドだけに float: left があることを確認してください。都市/州/郵便番号に float: left と display: ブロックがある場合、可能な限り左側 (日付フィールドの右側) に浮動します。

<br />日付と都市/州/郵便番号を含む div の間に単に a を配置できないのはなぜですか?

于 2013-04-22T04:31:01.237 に答える