0

我是网络开发的新手。我正在使用 HTML 和 CSS 构建一个简单的网站。我有一个页面，其中包含 2 个由表格制成的价目表。我将它们都放在一个 div 中，我希望它们彼此重叠。他们的右边有一张照片。在 Firefox 中，当我使用绝对位置时一切正常，但在 IE7 中，图片会在两个表之间弹出。我试过左右浮动，定位绝对和相对。和怪癖有关吗？我还将文档类型更改为：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en">

这是我的一些代码。HTML：

<div id="price">
 <table> 
  <tr>
   <th>Cutting</th>
   <th>Stylist</th>
   <th>Senior Stylist</th>
  </tr>  
  <tr>
   <td>Men</td>
   <td>£32</td>
   <td>£35</td>
  </tr>
  <tr>
    <td>Women</td>
    <td>£36</td>
    <td>£40</td>
  </tr>
  <tr>
    <td>Restyle</td>
    <td>£40</td>
    <td>£45</td>
  </tr>
    <td colspan="3">student discount 10% Mon-Fri only</td>   
  </tr>

  <tr>
   <table> 
   <td>Half Head foils</td>
   <td>From £55</td>
  </tr>
  <tr>
    <td>Full Head foils</td>
    <td>From £75</td>
  </tr>
   <tr>
    <td>Colour between foils</td>
    <td>From £15</td>
  </tr>
  </tr>
   <tr>
    <td>Organic Permanent colour</td>
    <td>From £45</td>
  </tr>
  <tr>
    <td>Semi-Permanent colour</td>
    <td>From £40</td>
  </tr>
  <tr>
    <td>Colour correction</td>
    <td>By Quotation</td>
  </tr>  
</div>



 <div id="pricepicture">
  <img src="images/head.jpg" width="310" height="365" alt="picture of salon"/>
 </div>

和 CSS：（我最后一次尝试使用浮点数）

 #pricepicture {
  float: right;
  margin-right: 40px;
  margin-top: 100px;
  border: 1px solid #2c2e32;
  height: 365px;
  width: 310px;
  }

 #table {
  float: left;
  margin-left: 40px;
  margin-top: 50px;
  border-collapse: collapse; 
  }

 #price {
  float: left;
  margin-left: -5px;
  margin-top: 40px;
  }

  td {
   text-align: left;
   padding: 0.2em;
   font-size: 1.3em;
   }

  th {
   text-align: left;
   padding: 0.2em;
   font-size: 1.1em;
   }

  tr {
   height: 20px;
   }

几天来我一直在搜索堆栈溢出问题。在我把笔记本电脑扔出窗外之前，请帮忙！谢谢....

4

1 回答 1

0

有一些 HTML 语法错误。您必须确保所有标签都正确关闭，并且顺序正确。请参阅以下内容。

<div id="price">
<table> 
    <tr>
        <th>Cutting</th>
        <th>Stylist</th>
        <th>Senior Stylist</th>
    </tr>  
    <tr>
        <td>Men</td>
        <td>£32</td>
        <td>£35</td>
    </tr>
    <tr>
        <td>Women</td>
        <td>£36</td>
        <td>£40</td>
    </tr>
    <tr>
        <td>Restyle</td>
        <td>£40</td>
        <td>£45</td>
    </tr>
    <tr>
        <td colspan="3">student discount 10% Mon-Fri only</td>   
    </tr>
</table>

<table> 
    <tr>
        <td>Half Head foils</td>
        <td>From £55</td>
    </tr>
    <tr>
        <td>Full Head foils</td>
        <td>From £75</td>
    </tr>
    <tr>
        <td>Colour between foils</td>
        <td>From £15</td>
    </tr>
    <tr>
        <td>Organic Permanent colour</td>
        <td>From £45</td>
    </tr>
    <tr>
        <td>Semi-Permanent colour</td>
        <td>From £40</td>
    </tr>
    <tr>
        <td>Colour correction</td>
        <td>By Quotation</td>
    </tr>  
</table>
</div>

<div id="pricepicture">
    <img src="images/head.jpg" width="310" height="365" alt="picture of salon"/>
</div>
于 2013-10-14T13:23:11.433 回答