Question

我想创建一个标题为6px高度的DIV，在div体内，我希望将图像和文本对齐。 DIV身体的高度应该是固定的。

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

Answer 2

尝试使用以下代码创建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>

Answer 3

以Jon为基础。一个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>

DIV与图像和文本

3 个答案: