6pxの高さのヘッダーでDIVを作成し、divボディの内部に画像とテキストを並べて配置したいと考えています。 DIV本体の高さは固定してください。ここで画像とテキストを含むDIV
0
A
答えて
1
は、あなたが(インラインスタイルを使用して)やりたい方法の非常に単純な例です:
<div>
<div style="height:6px;width:500px;background-color:#3399CC;"></div>
<div style="clear:both"/>
<div style="float:left"><img src="http://www.google.com/intl/en_ALL/images/logo.gif"/></div>
<div style="float:left">Your Text Here</div>
</div>
<div style="clear:both"/>
あなたはこのコードをテストし、ここでリアルタイムで編集しようとすることができますhttp://htmledit.squarefree.com/.
1
を作成してみてください次のコードを含むhtmlページ:
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#container {
margin-right: auto;
margin-left: auto;
width: 200px;
height: 200px;
background: #acf;
}
#header {
background: #f98;
padding-bottom: 1px;
}
#container img {
background: #000;
float: left;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Heading</h1>
</div>
<img src="image.jpg" alt="" height="25" width="25" />
<p>Text text text</p>
</div>
</body>
</html>
0
ビルオンジョン。 6pxのヘッダーはマイナーな小さなです!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Div layout</title>
<style type="text/css">
/*<![CDATA[*/
#container {
margin:0 auto;
width:400px;
height:300px;
overflow:scroll;
background:#acf;
padding:0;
}
#container h1 {
background:#f98;
padding:0 0 1px 0;
height:6px;
font-size:2px;
text-align:center;
font-weight:normal;
border:3px #FFA500 outset;
}
#container img {
background:#000;
float:left;
padding:10px;
margin:10px;
}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<h1>Heading</h1><img src="image.jpg" alt="" height="25" width="25" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Nulla sit amet tellus vel augue
hendrerit pellentesque. Aenean cursus, quam nec volutpat interdum, nibh
sapien elementum mi, id accumsan neque risus a est. Praesent libero
metus, tincidunt at, vulputate eu, vehicula at, arcu? Donec orci metus,
ornare non, viverra vel, vehicula ac, dui. Aliquam erat volutpat. Fusce
malesuada urna quis augue. Mauris in purus. Maecenas at est. Nunc
vestibulum feugiat justo. Etiam nec urna. Nulla facilisi. Ut enim.
Nullam sit amet mauris eu quam eleifend vestibulum! Cras lectus turpis,
cursus nec, fermentum egestas, fermentum non, tortor.</p>
</div>
</body>
</html>
関連する問題
- 1. 画像とテキストを含むjQueryドラッグ&ドロップのDIV選択
- 2. 画像とテキストを含むナビゲーションメニュー
- 3. 画像とテキストを含むWinFormsボタン
- 4. MVCの画像を含む中央テキスト
- 5. 右の画像を含むスパン(テキスト)
- 6. div(画像のみ)とdiv(テキスト)
- 7. gif画像を含む表示と非表示divの遅延
- 8. div内に兄弟画像を含むテキストを中央に配置
- 9. jQueryスライドショーに画像固有のテキストを含む別のdivがある
- 10. asp.netのテキストと画像を含むテキストボックスをオートコンプリート
- 11. 投稿を送るxmlrpcのテキストと画像をワードプレスに含む
- 12. 画像とテキストを含むwpfボタンを作成する
- 13. テキストと画像を含む編集可能なUITextView?
- 14. レスポンシブブーツラップ画像グリッドとテキストを含むウィンドウのサイズ変更
- 15. 背景画像とテキストを含むカスタムhtmlボタンの作成
- 16. 画像とテキストをphpで含む.docxファイルの読み方
- 17. 画像とテキストを含むJList:テキストがArrayListから来る場所<String>
- 18. js offsetHeightで画像を含むdivの高さを取得
- 19. 親div要素とsvg画像とテキストを含むlinkedinのようなドラッグ可能なタグを作成する
- 20. Div画像とテキストの整列
- 21. ジキルテーマの画像を含む
- 22. WebViewとtextViewの画像を含むGridView?
- 23. 文書ではなく画像を含むスクロールDIV
- 24. divを含むより広い画像にする
- 25. 背景画像を含むdivの周囲の暗い輪郭
- 26. 2列にテキストを含む画像を表示する方法
- 27. 画像と同じ長さの背景を含むテキストブロック画像
- 28. 画像のDIVを含むMain DIVをFloat Centerに置き換えます
- 29. 各画像に特定のテキストを含むスライドショー
- 30. Jupyterノートブックにテキストと画像を含む表を表示する方法は?
テキストがビューよりも長い場合、これは機能しません。次の行に移動します。 – Joost