特定表对齐问题

这里是我的代码广义版本：特定表对齐问题

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 

<body style="font-size: 36px"> 
</body> 
</html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
</head> 
<body style="min-width:100%" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 

       <div align="center"> 
<table align="center" width="720" height="3653" border="1" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td width="720" valign="top" colspan="14"> 

       <img src="" width="720" height="207" border="0" style="display:block" alt=""></td> 
    </tr> 
    <tr> 
     <td width="720" valign="top" colspan="14"> 

       <img src="" width="720" height="373" border="0" style="display:block" alt=""></td> 
    </tr> 
    <tr> 
     <td width="720" height="152" valign="top" colspan="14" style="background-color:black"> 
      <span style="font-family:arial,helvetica,sans-serif; font-size:36pt;"><br><center> 
       <p style="color:white"><strong>Statement<br> 
       </strong></p></span> 
      <span style="font-family:arial,helvetica,sans-serif; font-size:30pt;"> 
       <p style="color:white">Statement</p> 
<span style="font-family:arial,helvetica,sans-serif; font-size:30pt;"> 
      <h5 style="color:white">Statement</h5> 
      <span style="font-family:arial,helvetica,sans-serif; font-size:24pt;"> 
       <p style="color:white">Statement</p> 
     </center></span></td></p> 
    </tr> 

    <tr> 
     <td width="720" height="547" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;"> 
      <p align="center"><span style="font-family:arial,helvetica,sans-serif; font-size:35pt;"><strong>Statement<br></strong></span><br><br><span style="font-family:arial,helvetica,sans-serif; font-size:22pt;">Statement<br></span></p><p align="center">Site</p> 
      <tr> 
        <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;"> 
      <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Statement</p> 

<tr> 
     <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;"> 
      <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Statement</p> 


    </tr> 
<br> 
<tr> 
     <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;"> 
      <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Site </p> 
       <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Statement</p> 
      <hr width="60%"></b></center></span></td> 
    </tr> 
       </strong></p></span> 

    </tr> 
<tr> 
     <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;"> 
      <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Date</p> 

    <tr> 
     <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;"> 
      <span style="font-family:arial,helvetica,sans-serif; font-size:26pt;"><center><b><p>Statement</p> 

      <hr width="60%"></b></center></span></td> 
    </tr> 
    <tr> 
     <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;"> 
      <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Date</p> 

    <tr> 
     <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;"> 
      <span style="font-family:arial,helvetica,sans-serif; font-size:26pt;"><center><b><p>Statement</p> 

      <hr width="60%"></b></center></span></td> 
    </tr> 
    <tr> 
     <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;"> 
      <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Statement</p> 

    <tr> 
     <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;"> 
      <span style="font-family:arial,helvetica,sans-serif; font-size:26pt;"><center><b><p>Statement 
</p> 

      <hr width="60%"></b></center></span></td> 
    </tr> 
    <tr> 
     <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;"> 
      <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Date</p> 

    <tr> 
     <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;"> 
      <span style="font-family:arial,helvetica,sans-serif; font-size:26pt;"><center><b><p>Statement 
</p> 

      <hr width="60%"></b></center></span></td> 
    </tr> 
     <tr> 
     <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;"> 
      <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Statement 
</p> 
      <span style="font-family:arial,helvetica,sans-serif; font-size:14pt;"><center><b><p>Statement 

</p> 

      <hr width="60%"></b></center></span></td> 
    </tr> 
    <tr> 
     <td width="720" valign="top" colspan="14"> 
      <a href=""> 
       <img src="" width="720" height="226" border="0" style="display:block" alt=""></a></td> 
    </tr> 
    <tr> 
     <td width="15" valign="top" rowspan="3"> 
      <img src="" width="15" height="600" style="display:block" alt=""></td> 
     <td width="160" valign="top" colspan="2" rowspan="3"> 
      <a href=""><img src="" width="160" height="600" style="display:block" alt=""></a></td> 
     <td width="18" valign="top" colspan="2" rowspan="3"> 
      <img src="" width="18" height="600" style="display:block" alt=""></td> 
     <td width="336" valign="top" colspan="5"> 
      <a href=""><img src="" width="336" height="280" style="display:block" alt=""></a></td> 
     <td width="18" valign="top" rowspan="3"> 
      <img src="" width="18" height="600" style="display:block" alt=""></td> 
     <td width="160" valign="top" colspan="2" rowspan="3"> 
      <a href=""><img src="" width="160" height="600" style="display:block" alt=""></a></td> 
     <td width="13" valign="top" rowspan="3"> 
      <img src="" width="13" height="600" style="display:block" alt=""></td> 
    </tr> 
    <tr> 
     <td width="336" valign="top" colspan="5"> 
      <img src="" width="336" height="40" style="display:block" alt=""></td> 
    </tr> 
    <tr> 
     <td width="336" valign="top" colspan="5"> 
      <a href=""><img src="" width="336" height="280" style="display:block" alt=""></a></td> 
    </tr> 
    <tr> 
     <td width="720" valign="top" colspan="14"> 
      <a href=""> 
       <img src="" width="720" height="176" border="0" style="display:block" alt=""></a></td> 
    </tr> 
    <tr> 
     <td width="720" valign="top" colspan="14"> 
      <a href=""> 
       <img src="" width="720" height="375" border="0" style="display:block" alt=""></a></td> 
    </tr> 
    <tr> 
     <td width="720" valign="top" colspan="14"> 
      <img src="" width="720" height="59" style="display:block" alt=""></td> 
    </tr> 
    <tr> 
     <td width="720" valign="top" colspan="14"> 
      <a href=""> 
       <img src="" width="720" height="105" border="0" style="display:block" alt=""></a></td> 
    </tr> 
    <tr> 
     <td width="720" valign="top" colspan="14"> 
      <a href=""> 
       <img src="" width="720" height="113" border="0" style="display:block" alt=""></a></td> 
    </tr> 
    <tr> 
     <td width="720" valign="top" colspan="14"> 
      <a href=""> 
       <img src="" width="720" height="111" border="0" style="display:block" alt=""></a></td> 
    </tr> 
    <tr> 
     <td width="720" valign="top" colspan="14"> 
      <a href=""> 
       <img src="" width="720" height="108" border="" style="display:block" alt=""></a></td> 
    </tr> 
    <tr> 
     <td width="85" valign="top" colspan="2"> 
      <a href=""> 
       <img src="" width="85" height="131" border="1" style="display:block" alt=""></a></td> 
     <td width="85" valign="top" colspan="2"> 
      <a href=""> 
       <img src="" width="85" height="131" border="1" style="display:block" alt=""></a></td> 
     <td width="85" valign="top" colspan="2"> 
      <a href=""> 
       <img src="" width="85" height="131" border="1" style="display:block" alt=""></a></td> 
     <td width="85" valign="top" colspan="2"> 
      <a href=""> 
       <img src="" width="85" height="131" border="1" style="display:block" alt=""></a></td> 
     <td width="85" valign="top" colspan="2"> 
      <a href=""> 
       <img src="" width="85" height="131" border="1" style="display:block" alt=""></a></td> 
     <td width="85" valign="top" colspan="2"> 
      <a href=""> 
       <img src="" width="85" height="131" border="1" style="display:block" alt=""></a></td> 
     <td width="85" valign="top" colspan="2"> 
      <a href=""> 
       <img src="" width="85" height="131" border="1" style="display:block" alt=""></a></td> 
     <td width="125" valign="top" colspan="0"> 
      <a href=""> 
       <img src="" width="125" height="131" border="0" style="display:block" alt=""></a></td> 
    </tr> 
    <tr> 
     <td width="720" valign="top" colspan="14"> 
      <a href=""> 
       <img src="" width="720" height="63" border="0" style="display:block" alt=""></a></td> 
    </tr> 
    <tr> 
     <td valign="top"> 
      <img src="" width="15" height="1" style="display:block" alt=""></td> 
     <td valign="top"> 
      <img src="" width="75" height="1" style="display:block" alt=""></td> 
     <td valign="top"> 
      <img src="" width="85" height="1" style="display:block" alt=""></td> 
     <td valign="top"> 
      <img src="" width="5" height="1" style="display:block" alt=""></td> 
     <td valign="top"> 
      <img src="" width="13" height="1" style="display:block" alt=""></td> 
     <td valign="top"> 
      <img src="" width="77" height="1" style="display:block" alt=""></td> 
     <td valign="top"> 
      <img src="" width="76" height="1" style="display:block" alt=""></td> 
     <td valign="top"> 
      <img src="" width="76" height="1" style="display:block" alt=""></td> 
     <td valign="top"> 
      <img src="" width="76" height="1" style="display:block" alt=""></td> 
     <td valign="top"> 
      <img src="" width="31" height="1" style="display:block" alt=""></td> 
     <td valign="top"> 
      <img src="" width="18" height="1" style="display:block" alt=""></td> 
     <td valign="top"> 
      <img src="" width="32" height="1" style="display:block" alt=""></td> 
     <td valign="top"> 
      <img src="" width="128" height="1" style="display:block" alt=""></td> 
     <td valign="top"> 
      <img src="" width="13" height="1" style="display:block" alt=""></td> 
    </tr> 
</table> 
</div></body> 
</html>

我无法在三排以上两个图像的720具体的黑盒的宽度内排列的一切，和底部有8个图标。我认为，由于第8个图标稍宽，将其宽度设置为125，而其他7到85会在所有图标上直线720，但它们不匹配：

正如您从截图下面，一切都被移位到一个容器这是大于720的左边：

照片1

照片2

来源

2016-11-19 Forwarding

你不熟悉CSS？如果你通过单独的文件编写你的样式，这个项目可能会更简单。此外，可能几乎没有必要将所有样式都设置为表格。如果我正确理解您的问题，您可以使用标准<div>元素。下面是我在下面发布的代码中所做的结果的screen shot。

这里是我的代码

.table { 
 
    border: 1px solid grey; 
 
    width: 1080px; 
 
    height: 100%; 
 
    margin: auto; 
 
} 
 
.box1 { 
 
    border: 1px solid grey; 
 
    height: 300px; 
 
    width: 720px; 
 
    margin: auto; 
 
} 
 
.box2 { 
 
    border: 1px solid grey; 
 
    height: 300px; 
 
    width: 720px; 
 
    background-color: black; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    margin: auto; 
 
} 
 
.box2 p { 
 
    color: white; 
 
    font-size: 30px; 
 
} 
 
.smallTable { 
 
    width: 1080px; 
 
    height: 100px; 
 
    border: 1px solid grey; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 
.smallBox { 
 
    height: 100px; 
 
    width: 85px; 
 
    border: 1px solid grey; 
 
    display: inline-block; 
 
} 
 
.bigBox { 
 
    height: 100px; 
 
    width: 125px; 
 
    border: 1px solid grey; 
 
    display: inline-block; 
 
}

<html> 
 

 
<head> 
 
    <link type="text/css" rel="stylesheet" href="style.css" </head> 
 

 
    <body> 
 
    <div> 
 
     <div class="table"> 
 
     <div class="box1"></div> 
 
     <div class="box1"></div> 
 
     <div class="box2"> 
 
      <p>Statement</p> 
 
     </div> 
 
     </div> 
 
     <div class="smallTable"> 
 
     <div class="smallBox"></div> 
 
     <div class="smallBox"></div> 
 
     <div class="smallBox"></div> 
 
     <div class="smallBox"></div> 
 
     <div class="smallBox"></div> 
 
     <div class="smallBox"></div> 
 
     <div class="smallBox"></div> 
 
     <div class="bigBox"></div> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

正如你所看到的，我用的样式规则像margin: auto;我<div>元素移动到它们的父元素的中心。底部的八个盒子可以以相同的方式对齐，使用display: inline-block;使它们水平显示。

我希望这能在一定程度上回答你的问题。编写如此多的线内样式没有多大意义。尽可能地练习DRY编程，并使用CSS等工具，没有理由重复太多的样式。

来源

2016-11-20 06:54:58 staticCoffee

这是我最终做的（没有表格），但是在你的截图中，我注意到图像与盒子不一致，图标没有完全包含在恒定宽度内（图像，盒子，全部8图标）。 – Forwarding

我没有考虑，也没有调整框之间的边框长度和填充。这些也是可配置的 - 只是想告诉你一个更好的设置方式和样式，你的代码。 – staticCoffee

是的，谢谢。 – Forwarding

特定表对齐问题

回答

相关问题