画像とテキストを含むDIV

6pxの高さのヘッダーでDIVを作成し、divボディの内部に画像とテキストを並べて配置したいと考えています。 DIV本体の高さは固定してください。ここで画像とテキストを含むDIV

2009-03-31 KJai

は、あなたが（インラインスタイルを使用して）やりたい方法の非常に単純な例です：

<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/.

出典

2009-03-31 04:38:58 Gdeglin

テキストがビューよりも長い場合、これは機能しません。次の行に移動します。 – Joost

を作成してみてください次のコードを含む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>

出典

2009-03-31 08:08:30

ビルオンジョン。 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>

出典

2009-04-01 18:28:11 BryanH

画像とテキストを含むDIV

答えて

関連する問題