想用table实现这样的布局_html/css_WEB-ITnose

回复讨论(解决方案)

看不见你的图啊 卡卡西老师

直接用表格完成就可以.插入表格...

看不见你的图啊 卡卡西老师
图片：

嵌套一下
边框处理一下就是了

<table width="300"><tbody><tr><td><table width="100%"><tbody><tr><td width="50%">1</td><td width="50%">2</td></tr></tbody></table></td></tr><tr><td><table width="100%"><tbody><tr><td width="33%">3</td><td width="33%">4</td><td width="33%">5</td></tr></tbody></table></td></tr></tbody></table>

add css:

table{     border-collapse:collapse;    margin:-1px;}.out td {    border:1px gray solid;}.in1 td,.in2 td{    border:none;}.in1 td:first-child,.in2 td:not(:last-child){    border-right:1px solid red;}

用表格还是有点麻烦，以后更改费事一点，div好点

有个方法，不用嵌套表格。

<table width="900" height="200" border="0" align="center" cellpadding="0" cellspacing="3" bgcolor="#000000">  <tbody><tr>    <td colspan="2" bgcolor="#AAFFCC"> </td>    <td colspan="2" bgcolor="#AAFFCC"> </td>  </tr>  <tr>    <td width="286" bgcolor="#AAFFCC"> </td>    <td colspan="2" bgcolor="#AAFFCC"> </td>    <td width="288" bgcolor="#AAFFCC"> </td>  </tr></tbody></table>

DIV欢迎您：

<title>图片布局</title>
  <div style="float:left;width:100%;height:100%"> 
    <div style="float:left;width:100%;height:50%;"> 
       <img style="float:left;width:50%;height:100%;" src="https://www.gxlcms.com/mr.jpg"> 
       <img style="float:right;width:50%;height:100%;" src="https://www.gxlcms.com/mr.jpg"> 
    </div>  
    <div style="float:left;width:100%;height:50%;"> 
      <img style="float:left;width:33.33%;height:100%;" src="https://www.gxlcms.com/mr.jpg">  
      <div style="float:right;width:66.66%;height:100%;"> 
         <img style="float:left;width:50%;height:100%;" src="https://www.gxlcms.com/mr.jpg">  
         <img style="float:right;width:50%;height:100%;" src="https://www.gxlcms.com/mr.jpg"> 
      </div> 
    </div> 
  </div> 

有个方法，不用嵌套表格。

<table width="900" height="200" border="0" align="center" cellpadding="0" cellspacing="3" bgcolor="#000000">  <tbody><tr>    <td colspan="2" bgcolor="#AAFFCC"> </td>    <td colspan="2" bgcolor="#AAFFCC"> </td>  </tr>  <tr>    <td width="286" bgcolor="#AAFFCC"> </td>    <td colspan="2" bgcolor="#AAFFCC"> </td>    <td width="288" bgcolor="#AAFFCC"> </td>  </tr></tbody></table>

有个方法，不用嵌套表格。

<table width="900" height="200" border="0" align="center" cellpadding="0" cellspacing="3" bgcolor="#000000">  <tbody><tr>    <td colspan="2" bgcolor="#AAFFCC"> </td>    <td colspan="2" bgcolor="#AAFFCC"> </td>  </tr>  <tr>    <td width="286" bgcolor="#AAFFCC"> </td>    <td colspan="2" bgcolor="#AAFFCC"> </td>    <td width="288" bgcolor="#AAFFCC"> </td>  </tr></tbody></table>