0

私は学校のプロジェクトのためにエクストリームスポーツ会社のウェブサイトを作っています.画像の後にテキストをコンテナのような要素に入れてスポーツを紹介したいと思います. 私はHTMLとCSSに比較的慣れていません。

ここにHTMLがあります

<div class="sports" "spacing"> 
    <img src="images/skydive.jpg" class="thumbnail" alt="" /> 
    <p class="float" > Skydiving is one of those things everybody wants to experiance and is on many peoples bucket list. It is the ultimate thrill hurtaling towards the earth with no restrictions. We have a number of techniques avalible including         Tandem, Static line and solo! </p> 
</div>

そして、CSS

.sports {
    height:230px;
    width:900px;
    background-color:#f1f1f1;
    margin-right:auto;
    margin-left:auto;
    margin-bottom: 20px;
    display:table;
}

.thumbnail {
    max-height: 200px;
    margin-top:15px;
    margin-bottom:15px;
    margin-left: 15px;
    display:inline-block;
}

.float {
    text-align:center;
    display:inline-block;
    width:410px;
    position:relative;
    top:-71px;
    padding-left:80px;
}

私はこれらの設定をいじってみましたが、これで機能しますが、画像のサイズとテキストの量に固有のものであり、別の6つの異なるものに対して同じことをする必要はありません.

ありがとう

4

1 に答える 1

1

何を取得しようとしているのかよくわかりませんが、おそらくより簡単な方法は、画像に「フロート」オプションを指定し、テキストからフロートを削除することです（相対的な配置は不要です）。テキストがインラインで表示される場合、画像の余白を考慮して、画像の周囲にスペースが使用されます。

于 2013-03-08T19:25:05.807 に答える