Question

我有4个分区，标题，左，右和页脚。我想再次将标题划分为2个部分，左侧标题和右侧标题。在右侧标题中，我想将图像保留在同一个区域中我想提及其他选项，例如home，关于我们。而在左派中应该有文字。

如何借助HTML和CSS制作它？以下是HTML和CSS代码段：

 <html>
 <head>
  <title>Search Engine Title Goes Here</title>
  <link rel="stylesheet" type="text/css" href="style1.css">
  </head>
  <body>
  <div id="container"> </div>
  <div id="header">
    <div id="header-left-container">
    <h1>heading1,<br> heading2 and <br>heading3</h1>
    </div>
    <div id=header-right-container>
    <img border="0" src="tra.jpg"  alt="drug"align="right" width="750" height="150">
    </div>
    </div>
   <div id="sidebar"> Left </div>
   <div id="content"> <p></p></div>
   <div id="footer"> </div>
   </body>
   </html>

CSS代码：

  body {background: #ffffff; margin: 0; padding: 0;}
  a {color: #2b2bf6;}

  #container
  {width: 900px;
   margin: 0;
   padding: 0;
   background: #dddddd;}

   #header
   {width:1000;
   height: 150px;
   margin: 0;
   padding: 0;
   border: 0;
   background: #FFFFA3;}

   #sidebar
   {width: 200px;
   height: 400px;
   margin: 0;
   padding: 0;
   border: 0;
   float: left;
   background: #f0e811;}

  #content
  {width: auto;
  height: 400px;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  background: #8be0ef;}

  #footer
  {width: auto;
  height: 70px;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  background: #000000;
  clear:both;}

由于我是网页设计的新手，取决于你的合作。

Answer 1

HTML：

请务必引用您的班级名称
如果您有空div元素通过在其中添加 可能会发现他们的行为更具可预测性
像img和br这样的标签应该是自动关闭的（<img ... />和<br /> 而不是<img ...>和<br>）
尽量使缩进保持一致，这样可以使代码更易于维护和调试
最好使用CSS样式而不是尝试使用属性
最好使用CSS样式而不是尝试使用属性删除img元素的边框
图像元素对齐不起作用，因为它的父元素（＃header-right-container）将决定它的位置。
检查您是否希望容器div包装所有其他元素 - 如果是，请检查宽度，因为它比标题div小100px

这留下以下HTML代码：

<div id="container">&nbsp;</div>
<div id="header">
    <div id="header-left-container">
        <h1>heading1, <br />heading2 and <br />heading3</h1>
    </div>
    <div id="header-right-container">
        <img src="tra.jpg" alt="drug" width="750" height="150" />
    </div>
</div>
<div id="sidebar">Left</div>
<div id="content"><p>&nbsp;</p></div>
<div id="footer">&nbsp;</div>

CSS：

确保您的宽度已分配单位（例如width: 1000px;
正如Dan Goodspeed建议的那样，在子标题类中添加浮点数
保持缩进一致，便于维护和调试

以下是已实施建议的清理代码： http://jsfiddle.net/fD3dN/

Answer 2

你应该只使用CSS进行样式设置，没有border =“0”，width =“750”等等。不要忘记在HTML中引用你的ID。我看到你忘了引用header-right-container。此外，在CSS中，如果数字不是0，则必须指定一个单位，而不是#header宽度。看看你的代码，我猜你所遇到的问题是左右标题出现在彼此的顶部。根据内容的不同，有各种方法可以处理它，但也许这会对你的CSS有所帮助......

 #header-left-container { float:left;}
 #header-right-container { float:right;}

Answer 3

我已经在这支笔中简化了你的HTML和CSS http://cdpn.io/CgBIu我也写了它，假设容器是下面代码的包装。

您将看到我在CSS中完成了所有样式并保持HTML非常简单，这将使文件大小保持不变并允许页面在将来加载更快。如前所述，检查您的代码是否有任何不完善之处，例如＆＃34;＆＃34; ID名称丢失。

自闭标签取决于您使用的Doctype，但最好使用/＆gt;关闭它们。

您不需要为两个元素添加浮动，您可以将其添加到侧边栏，然后内容将在其旁边对齐。无需编写您不需要的额外代码。

如何在内部划分添加图像和文本？

3 个答案: