2

これが私がやってのけようとしているものです...

ここに画像の説明を入力

対応する HTML:

<article>
  <h3>Fading Forest</h3>
  <p>Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
  <p class="permalink"><a href="http://example.com/12345" title="">example.com/12345</a></p>
</article>

だから私がする必要があるのは、それぞれh3をpボックスにラップすることですが、現在、タグh3とpタグはブロックレベルの要素であるため、対応するブロックは幅いっぱいに広がっています。

コンテンツに応じて幅を調整したい（そして、幅max-widthが広すぎないように適用するだけです）。

これは私がこれまでに得たものですが、うまくいきません...明らかに。http://jsfiddle.net/hAtRs/

4

2 に答える 2

1

inline-block; を忘れてください。必要ではないようです。

フロートして左にクリア:

h3, p {
    float: left;
    clear: left;
}

http://jsfiddle.net/hAtRs/20/

于 2012-07-22T02:48:40.897 に答える
0 
h3, p {
    background:#999;
    color:white;
    padding:10px 10px 10px 80px;
    margin-bottom:1px;
    display:inline-block;
}

次に、すべての要素の後に改行を追加します。

于 2012-07-22T02:59:26.563 に答える