DIV с изображением и текстом - PullRequest
Новая
       11

DIV с изображением и текстом

0 голосов
/ 31 марта 2009

Я хочу создать DIV с заголовком высотой 6 пикселей и внутри тела div, я хочу выровнять изображение и текст рядом друг с другом. Высота корпуса DIV должна быть фиксированной.

Ответы [ 3 ]

1 голос
/ 31 марта 2009

Попробуйте создать 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>
1 голос
/ 31 марта 2009

Вот очень простой пример того, как делать то, что вы хотите (используя встроенные стили): 

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

0 голосов
/ 01 апреля 2009

Опираясь на Джона. 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>
...