3

簡単だと確信していることをやろうとしていますが、できません。

私がやりたいのは、画像とその画像の後にいくつかのテキストを用意し、画像とテキストの間のスペースの量を正確に制御できるようにすることだけです。

これが私のコードです：

<div class="wrap"><div style="width:189px;""position:relative;float:left;top:5px;">
      <a href="http://google.com"><img src="30000000_1.jpg" style="position:absolute" width="189"></a>
</div>

私のスタイル シートでは、wrap に次の属性があります。

.wrap {
    /*text-align: left;*/
    width: 1100px;
    height: 870px;
    background-color: white;
    color: black;
    padding: 10px;
    margin: auto;
}

画像のすぐ下にテキストを次のように表示します。

ユーザー名

年

位置

現在、テキストを配置する場所を制御するために大量のブレーク タグを追加しているだけですが、それは面倒で、もっと良い方法があるはずです。

助けてくれてありがとう。

4

5 に答える 5

2 
<div class="wrap">
<div style="width:189px;position:relative;float:left;top:5px;">
<a href="http://google.com"><img src="30000000_1.jpg" style="position:absolute" width="189" /></a>
</div>
<br clear="all" />
<div id="bottomText">
Username
<br /><br />
Age
<br /><br />
Location
</div>
</div>

CSS:

.wrap {
    /*text-align: left;*/
    width: 1100px;
    height: 870px;
    background-color: white;
    color: black;
    padding: 10px;
    margin: auto;
}

#bottomText{
    margin-top: 10px;
}

margin-top: 10px希望の距離に変更します。

bottomText複数の ID を持つ予定がある場合は、ID ではなくクラスに変更します。

（注：なぜそこにあったのかがわからないため""、2番目から削除しました。div

于 2012-11-24T17:31:52.937 に答える
1

このソリューションjsfiddleを確認してください。個人的には、インライン スタイルは使用しません。<ul>テキストに使用させていただきました。これにより、テキストの位置をより適切に制御できます。

于 2012-11-24T17:33:55.090 に答える
1

リストであるため、テキストには順序なしリストを使用してください。ul「ブロックレベル要素」であるため、自動クリアされます。また、インライン スタイルではなく、外部スタイルシートを必ず使用してください。外部ははるかにクリーンで、操作や変更が簡単です。例: http://jsfiddle.net/codeview/Fk3EK/

HTML: 

<div class="wrap">  
<a href="http://google.com"><img src="30000000_1.jpg"></a>  
<ul>  
<li>Username</li>  
<li>Age</li>  
<li>Location</li>  
<ul>  
</div>

CSS: 

.wrap {  
    /*text-align: left;*/  
    width: 1100px;  
    height: 870px;  
    background-color: yellow;  
    color: black;  
    padding: 10px;  
    margin: auto;  
}  
ul { list-style-type:none; }  
li { padding:5px 0; }
于 2012-11-24T18:28:44.697 に答える
0

私はそれを働かせることができません。おそらく、私が行っている他のコードが見えないからでしょう。しかし、私は間違った方法で問題に取り組んでいたのかもしれません。

CSSの配置をいじり始める前の私のコードは次のとおりです。

<br><br>

 <div class="imgleft">
 <a href="http://image.jpg" alt="" border="0"></a></div>

    <br><br><br><br><br><br><br><br><br><br><br>

        <span style="font-weight: bolder;font-size: 12px;"></br><br><br></br>
    <font color="green">    User69 </font> <a href="google.com"><img src="online01.gif" alt="" border="0" style="float:center"></a><br>

        Location: 
        <script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script> 
        <script language="JavaScript">document.write(geoip_region_name());</script></span> 
        </script></br>


<br><br>

問題は、画像には幅が設定されていますが、高さが異なるため、8 個のブレーク タグを使用することもあれば、7 個のブレーク タグを使用することもありますが、各画像の下 (テキストが配置される場所) の正確な距離は異なります。しかも見た目が悪い。

このページには 3 つの画像があるので、画像の下に画像、テキスト (点滅する gif の画像もあります)、その下にテキストのある別の画像、というように続きます。ページの左側の上から下へ。

私のcssからの関連ビットは次のとおりです。

.imgleft {
float: left;
width: 120px;
}

.imgleft img {
clear: both;
width: 175px;
padding-bottom: 0px;

 }

私はこの方法を必要以上に複雑にしていると確信しています! ごめん。

于 2012-11-24T18:47:03.553 に答える
0

誰かが見てくれたら、最初の回答へのコメントに私のコードへのリンクを入れました。ありがとう。

于 2012-11-24T20:35:19.323 に答える