Question

我是网络开发的新手。我正在使用HTML和CSS构建一个简单的站点。我有一个页面，其中包含2个表格列表。我把它们都放在一个div中，我希望它们在彼此之上。他们右边有一张照片。在firefox中，当我使用绝对位置时一切正常，但在IE7中，图片会在两个表之间弹出。我试过左右浮动，定位绝对和相对。这与Quirks有关吗？我还将doctype更改为：

<!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;
   }

我几天都在搜索Stack overflow问题。在我把笔记本电脑扔出窗外之前请帮忙！感谢....

Answer 1

存在一些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>

IE中的表位置不同

1 个答案: