見出しと説明のCSSデザインコードとは何ですか？

-1

見出しのスパンタグをイメージの右上に見せるようにするにはどうすればいいですか？説明スパンタグはイメージの右下に説明のように見えますか？見出しと説明のCSSデザインコードとは何ですか？

私はポジションを使用しようとしましたが、そのハードコーディングされ、私はそれが答えではないと思います。何か案が？ありがとう。

内のこれらの要素にラップ <div>と position:absolute;へ

<!doctype html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <style> 
 
    #a{ 
 
     font-size: 20px; 
 
    } 
 
    #b{ 
 
     font-size: 10px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <img src="https://www.gravatar.com/avatar/c5e2da1f5d1be77ee31491432c3b793f?s=32&d=identicon&r=PG" alt="Img" id="i" /> 
 
    <span id="a"> Heading </span> 
 
    <span id="b"> Description </span> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-10-03 Mohan Ravi

を。 ** [もっと研究をして]（// meta.stackoverflow.com/questions/261592)**あなたが問題を抱えていると、あなたが試みたものを投稿することができます** t作業**を提供し、** [最小、完全、および検証可能な例]（// stackoverflow.com/help/mcve)**を提供します。 – Rob

この問題を解答で解決できますか？ – caramba

使用position: relative; ..

div { 
 
    position: relative; 
 
    border:solid 1px red; 
 
} 
 

 
span#a { 
 
    position:absolute; 
 
top: 0px; 
 
right: 0px; 
 
} 
 

 

 
span#b { 
 
    position:absolute; 
 
bottom: 0px; 
 
right: 0px; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <style> 
 
    #a{ 
 
     font-size: 20px; 
 
    } 
 
    #b{ 
 
     font-size: 10px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <img src="https://www.gravatar.com/avatar/c5e2da1f5d1be77ee31491432c3b793f?s=32&d=identicon&r=PG" alt="Img" id="i" /> 
 
    <span id="a"> Heading </span> 
 
    <span id="b"> Description </span> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-10-03 08:45:37 caramba

あなたは正しい答えですが、 'position'を使わずに同じ結果を達成できる方法はありますか？ –

@MohanRavi私の知る限りではありません。ポジションを使用すると何が問題になりますか？ – caramba

@MohanRavi css floatプロパティを使用します。 –

このような何かを試してみてください。それはあなたが（例えばdescription）1 divであなたの見出しと説明を囲むことができます簡単に

<!doctype html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <style> 
 
    #a{ 
 
     font-size: 20px; 
 
    } 
 
    #b{ 
 
     font-size: 10px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <table> 
 
<tr><td rowspan="2"><img src="https://www.gravatar.com/avatar/c5e2da1f5d1be77ee31491432c3b793f?s=32&d=identicon&r=PG" alt="Img" id="i" /></td> 
 
    <td><span id="a"> Heading </span></td></tr> 
 
    <tr><td><span id="b"> Description </span></td></tr> 
 
    </table> 
 
</body> 
 
</html>

出典

2017-10-03 08:51:20

それは何をしますか？それはどのように質問に答えますか？マークアップを吹き飛ばしてはいけません。あなた自身を説明してください！ https://stackoverflow.com/help/how-to-answer – Rob

彼はそれを望む方法をテキストに並べますが、他の人は自分が行ったことでそれを作った –

です。 imgと.descriptionの両方を左または右に浮かべてください。

この試してください：SO上で、あなたが** **コードを自分で書いてみることが予想されているので、私は、オフトピックとして、この質問を閉じるために投票しています

<!doctype html> 
 
    <html> 
 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <style> 
 
     img { 
 
     float:left; 
 
     } 
 
     .description { 
 
     float:left; 
 
     } 
 
     #a{ 
 
     font-size: 20px; 
 
     } 
 
     #b{ 
 
     font-size: 10px; 
 
     } 
 
    </style> 
 
    </head> 
 

 
    <body> 
 
    <div> 
 
     <img src="https://www.gravatar.com/avatar/c5e2da1f5d1be77ee31491432c3b793f?s=32&d=identicon&r=PG" alt="Img" id="i" /> 
 
     <div class="description"> 
 
     <div id="a"> Heading </div> 
 
     <div id="b"> Description </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
    </html>

出典

2017-10-03 08:55:06

それはどうしますか？それはどのように質問に答えますか？マークアップを吹き飛ばしてはいけません。あなた自身を説明してください！ https://stackoverflow.com/help/how-to-answer – Rob

大丈夫@Rob。アドバイスをありがとう。次回は私の答えを改善します。 –

見出しと説明のCSSデザインコードとは何ですか？

答えて

関連する問題