lisalisa12311 2020-03-17 20:46 采纳率: 83.3%
浏览 441

萌新求助:html 的布局问题?谢谢各位!

为什么会出现这种情况?我想让右下侧的图片和左侧同高并排
图片说明图片说明

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>漫步时尚广场-购物栏目</title>
        <style type="text/css">
            .top_line{
                height: 33px;
                width: 100%;
                border-bottom: 1px solid #000;
            }
            .photo{
                height: 20px;
                width: 20px;
            }
            .orange{
                text-decoration: none;
            }
            .logo{
                height: 90px;
                width: 700px;
            }
            .white{
                font-weight: 900;
                color: #000;
                font-family: "微软雅黑";
                text-decoration: none;
            }
            .table1{
                font-family: "微软雅黑";
                height: 250px;
                width: 350px;
                font-size: 25px;
            }
            .left{
                float: left;
                background-color: #FFC;
                border: 1px solid #e5e4e1;
            }
            .word{
                font-size: 25px;
            }
            @font-face {font-family: "iconfont";
              src: url('//at.alicdn.com/t/font_1697164_clfj5gxblcw.eot?t=1584443261191'); /* IE9 */
              src: url('//at.alicdn.com/t/font_1697164_clfj5gxblcw.eot?t=1584443261191#iefix') format('embedded-opentype'), /* IE6-IE8 */
              url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKUAAsAAAAABiwAAAJKAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAo4XQE2AiQDCAsGAAQgBYRtBy0bgAURBXTIfhY4zjlEh5gz3JM2iV78zt8IN6Ul2vR+P8TDf3Nv900mvykwyHrWgApogZQBkg6EXz6e9ers/1ymB2hMnr9jd2oAIEuXtPz70gxYzem5GbVJUODmBk44gUjDLKHMBoC39xONJXUDrqm/AhpIHtBcIoIiAyMBBzYdaFTQyDahGW+YXvJAXB0n0GJCj7W7tnMCLVk4LhDPosCFVscjyyxeCY2JpVm8U6rS8/QGvC2+H/9MokVSFsKiA16dw8KfKKmgxnlG8BLQ6hIF1oBMnExG9qAqGL2qJVIzA76VH/xU15lZfNUg2F8X5raBMRgNfkpWCJBArno7MHzoKlK0P+zw+ePlf8Xnl7NPr58+NDnflGNenmTrMEkOU5lFLbCw+Vcf0yJYCK6WXn/tzvyvuhn82D0U+mybDVSvsAZeIdrYkq0kNKWsRZO2pOPQ2IQWLahhR97j56i2/7+JUOn/u63JeINCZY6UaWsotVpHQ2UDLVatr27VS1RFbgMrngFClxfBN9XvIQpd3kmZ9o3SgH80dEUVLc5CW7ZaiKhTIVdpjt4NRr7JObZop8w/ouAidaUtKRhnJGXkx/Fg1I+vU05yxYzyMpioMrKYDNfAaZSmBgsxMfk6CFWL2XDIU28a+CaDjh2CuBSZQ54bKOIzcpx1V53B54+QwIWUSxYqGu4zRJSi/tHYwGgDaV2Zb6r4lVdKlwITSjHEhJFBa2AQSaUMVEwPihGfGggPhAozw6gTb1UOnldnHihgNYS6FFFZFYp7RgEA') format('woff2'),
              url('//at.alicdn.com/t/font_1697164_clfj5gxblcw.woff?t=1584443261191') format('woff'),
              url('//at.alicdn.com/t/font_1697164_clfj5gxblcw.ttf?t=1584443261191') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
              url('//at.alicdn.com/t/font_1697164_clfj5gxblcw.svg?t=1584443261191#iconfont') format('svg'); /* iOS 4.1- */
            }

            .iconfont {
              font-family: "iconfont" !important;
              font-size: 16px;
              font-style: normal;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
            }

.icon-dot:before {
  content: "\e64f";
}

            .arrow{
                height: 20px;
                width: 20px;
            }
        </style>
    </head>
    <body>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="top_line">
        <tr>
            <td bgcolor="#f7f7f7" >
                <table border="0" cellspacing="0" cellpadding="0" align="center" width="1200">
                    <tr>
                        <td> 收藏 | HI,欢迎前来订购!
                            <a href="login.html" class="orange">【请登录】</a>
                            <a href="register.html" class="orange">【免费注册】</a>
                        </td>
                        <td align="right">客户服务 <img src="images/a.jpg" class="photo"/>&nbsp;网站导航
                        <img src="images/b.jpg" class="photo"/>&nbsp;<span>
                        <span></span>
                            我的购物车
                        <span>0</span>件<img src="images/e.jpg" class="photo"/></span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table> 
    <table width="100%" height="90px" cellspacing="0" cellpadding="0">
        <tr>
            <td><img src="images/logo.jpg" class="logo"/></a></td>
            <td align="right"><img src="images/bg.jpg"class="logo" style="width: 1100px;"/></td>
        </tr>
    </table>
    <table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#ce2626">
        <tr>
            <td>
                <table border="0" cellspacing="0" cellpadding="10" width="100%" align="center" class="white">
                    <tr class="word">
                        <td width="200">&nbsp;</td>
                        <td width="80" align="center" class="nav_active">
                            <a href="shoppingIndex.html" class="white">首页</a></td>
                        <td width="100" align="center" >
                            <a href="shoppingIndex.html" class="white">最新上架</a></td>
                        <td width="100" align="center">品牌活动</td>
                        <td width="100" align="center">原厂直供</td>
                        <td width="80" align="center">团购</td>
                        <td width="100" align="center">限时抢购</td>
                        <td width="100" align="center">促销打折</td>
                        <td width="200" align="center">&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <table style="height: 500px; width: 350px; background: #000; float: left;">
        <tr>
            <td class="left" valign="top">
                <table border="0" cellspacing="0" cellpadding="0"  class="table1">
                    <tr><th  bgcolor="#e5e4e1" align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;女装</th></tr>
                    <tr>
                        <td>&nbsp;&nbsp;<span class="iconfont icon-dot"></span><a href="#" style="text-decoration: none;">&nbsp;&nbsp;上衣</a>
                            <img src="images/arrow.jpg" align="right" class="arrow"/>       
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;&nbsp;<span class="iconfont icon-dot"></span>&nbsp;&nbsp;下装
                            <img src="images/arrow.jpg" align="right" class="arrow"/>
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;&nbsp;<span class="iconfont icon-dot"></span>&nbsp;&nbsp;连衣裙
                            <img src="images/arrow.jpg" align="right" class="arrow"/></td>
                    </tr>
                    <tr>
                        <td>&nbsp;&nbsp;<span class="iconfont icon-dot"></span>&nbsp;&nbsp;内衣
                            <img src="images/arrow.jpg" class="arrow" align="right"/></td>
                    </tr>
                    <tr><th  bgcolor="#e5e4e1" align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;女装</th></tr>
                    <tr>
                        <td>&nbsp;&nbsp;<span class="iconfont icon-dot"></span><a href="#" style="text-decoration: none;">&nbsp;&nbsp;上衣</a>
                            <img src="images/arrow.jpg" align="right" class="arrow"/>       
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;&nbsp;<span class="iconfont icon-dot"></span>&nbsp;&nbsp;下装
                            <img src="images/arrow.jpg" align="right" class="arrow"/>
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;&nbsp;<span class="iconfont icon-dot"></span>&nbsp;&nbsp;连衣裙
                            <img src="images/arrow.jpg" align="right" class="arrow"/></td>
                    </tr>
                    <tr>
                        <td>&nbsp;&nbsp;<span class="iconfont icon-dot"></span>&nbsp;&nbsp;内衣
                            <img src="images/arrow.jpg" class="arrow" align="right"/></td>
                    </tr>
                    <tr>
                        <td class="left" valign="top">
                            <table border="0" cellspacing="0" cellpadding="0"  class="table1">
                                <tr><th  bgcolor="#e5e4e1" align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;猜    你    喜    欢</th></tr>
                                <tr>
                                    <td>
                                        <br />
                                        <img src="images/a.jpg" width="350px" height="300px"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <br />
                                        <img src="images/a.jpg" width="350px" height="300px"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <br />
                                        <img src="images/a.jpg" width="350px" height="300px"/>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <td width="800" valign="top" style="float: right; margin: 0;">
        <table border="0" cellspacing="0" cellpadding="0" width="100%">
            <tr>
                <td align="center">
                    <table border="0" cellspacing="0" cellpadding="0" width="100%">
                        <tr>
                            <td align="center"valign="top">
                                <img src="images/a.jpg" width="750" height="450" style=" margin-top: 0; float: right"/>
                            </td>
                        <td valign="top">
                            <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                <tr>
                                    <td>
                                        <table border="0" cellspacing="1" cellpadding="0" width="100%" bgcolor="#eeeeee">
                                            <tr>
                                                <td height="35" >公告</td></tr>
                                                <tr>
                                                    <td bgcolor="#ffffff">
                                                        <table width="95%">
                                                            <tr>
                                                                <td height="30">李主任点赞第一村</td></tr>
                                                        </table>
                                                    </td>
                                                </tr>
                                        </table><!--公告 end-->
                                    </td></tr>
                                    <tr>
                                        <td height="8"></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <!--商品推荐区-->
                                            <table width="100%" bgcolor="#f7f7f7">
                                                <tr>
                                                    <td align="center">
                                                        <img src="images/b.jpg" width="80";height="35"/>
                                                    </td>
                                                    <td align="center">
                                                        <img src="images/b.jpg" width="80";height="35"/>
                                                    </td>
                                                    <td align="center">
                                                        <img src="images/b.jpg" width="80";height="35"/>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                            </table>
                        </td>
                        </tr>
                    </table>
                </td></tr>
        </table>
    </td>
    </body>
</html>

  • 写回答

1条回答 默认 最新

  • lucasxt 2020-03-18 08:38
    关注
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <title>漫步时尚广场-购物栏目</title>
        <style type="text/css">
            .top_line {
                height: 33px;
                width: 100%;
                border-bottom: 1px solid #000;
            }
    
            .photo {
                height: 20px;
                width: 20px;
            }
    
            .orange {
                text-decoration: none;
            }
    
            .logo {
                height: 90px;
                width: 700px;
            }
    
            .white {
                font-weight: 900;
                color: #000;
                font-family: "微软雅黑";
                text-decoration: none;
            }
    
            .table1 {
                font-family: "微软雅黑";
                height: 250px;
                width: 350px;
                font-size: 25px;
            }
    
            .left {
                float: left;
                background-color: #FFC;
                border: 1px solid #e5e4e1;
            }
    
            .word {
                font-size: 25px;
            }
    
            @font-face {
                font-family: "iconfont";
                src: url('//at.alicdn.com/t/font_1697164_clfj5gxblcw.eot?t=1584443261191');
                /* IE9 */
                src: url('//at.alicdn.com/t/font_1697164_clfj5gxblcw.eot?t=1584443261191#iefix') format('embedded-opentype'),
                    /* IE6-IE8 */
                    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKUAAsAAAAABiwAAAJKAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAo4XQE2AiQDCAsGAAQgBYRtBy0bgAURBXTIfhY4zjlEh5gz3JM2iV78zt8IN6Ul2vR+P8TDf3Nv900mvykwyHrWgApogZQBkg6EXz6e9ers/1ymB2hMnr9jd2oAIEuXtPz70gxYzem5GbVJUODmBk44gUjDLKHMBoC39xONJXUDrqm/AhpIHtBcIoIiAyMBBzYdaFTQyDahGW+YXvJAXB0n0GJCj7W7tnMCLVk4LhDPosCFVscjyyxeCY2JpVm8U6rS8/QGvC2+H/9MokVSFsKiA16dw8KfKKmgxnlG8BLQ6hIF1oBMnExG9qAqGL2qJVIzA76VH/xU15lZfNUg2F8X5raBMRgNfkpWCJBArno7MHzoKlK0P+zw+ePlf8Xnl7NPr58+NDnflGNenmTrMEkOU5lFLbCw+Vcf0yJYCK6WXn/tzvyvuhn82D0U+mybDVSvsAZeIdrYkq0kNKWsRZO2pOPQ2IQWLahhR97j56i2/7+JUOn/u63JeINCZY6UaWsotVpHQ2UDLVatr27VS1RFbgMrngFClxfBN9XvIQpd3kmZ9o3SgH80dEUVLc5CW7ZaiKhTIVdpjt4NRr7JObZop8w/ouAidaUtKRhnJGXkx/Fg1I+vU05yxYzyMpioMrKYDNfAaZSmBgsxMfk6CFWL2XDIU28a+CaDjh2CuBSZQ54bKOIzcpx1V53B54+QwIWUSxYqGu4zRJSi/tHYwGgDaV2Zb6r4lVdKlwITSjHEhJFBa2AQSaUMVEwPihGfGggPhAozw6gTb1UOnldnHihgNYS6FFFZFYp7RgEA') format('woff2'),
                    url('//at.alicdn.com/t/font_1697164_clfj5gxblcw.woff?t=1584443261191') format('woff'),
                    url('//at.alicdn.com/t/font_1697164_clfj5gxblcw.ttf?t=1584443261191') format('truetype'),
                    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
                    url('//at.alicdn.com/t/font_1697164_clfj5gxblcw.svg?t=1584443261191#iconfont') format('svg');
                /* iOS 4.1- */
            }
    
            .iconfont {
                font-family: "iconfont" !important;
                font-size: 16px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
    
            .icon-dot:before {
                content: "\e64f";
            }
    
            .arrow {
                height: 20px;
                width: 20px;
            }
        </style>
    </head>
    
    <body>
        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="top_line">
            <tr>
                <td bgcolor="#f7f7f7">
                    <table border="0" cellspacing="0" cellpadding="0" align="center" width="1200">
                        <tr>
                            <td> 收藏 | HI,欢迎前来订购!
                                <a href="login.html" class="orange">【请登录】</a>
                                <a href="register.html" class="orange">【免费注册】</a>
                            </td>
                            <td align="right">客户服务 <img src="images/a.jpg" class="photo" />&nbsp;网站导航
                                <img src="images/b.jpg" class="photo" />&nbsp;<span>
                                    <span></span>
                                    我的购物车
                                    <span>0</span>件<img src="images/e.jpg" class="photo" /></span>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <table width="100%" height="90px" cellspacing="0" cellpadding="0">
            <tr>
                <td><img src="images/logo.jpg" class="logo" /></a></td>
                <td align="right"><img src="images/bg.jpg" class="logo" style="width: 1100px;" /></td>
            </tr>
        </table>
        <table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#ce2626">
            <tr>
                <td>
                    <table border="0" cellspacing="0" cellpadding="10" width="100%" align="center" class="white">
                        <tr class="word">
                            <td width="200">&nbsp;</td>
                            <td width="80" align="center" class="nav_active">
                                <a href="shoppingIndex.html" class="white">首页</a></td>
                            <td width="100" align="center">
                                <a href="shoppingIndex.html" class="white">最新上架</a></td>
                            <td width="100" align="center">品牌活动</td>
                            <td width="100" align="center">原厂直供</td>
                            <td width="80" align="center">团购</td>
                            <td width="100" align="center">限时抢购</td>
                            <td width="100" align="center">促销打折</td>
                            <td width="200" align="center">&nbsp;</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <table style="height: 500px; width: 350px; background: #000; float: left;">
            <tr>
                <td class="left" valign="top">
                    <table border="0" cellspacing="0" cellpadding="0" class="table1">
                        <tr>
                            <th bgcolor="#e5e4e1" align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;女装</th>
                        </tr>
                        <tr>
                            <td>&nbsp;&nbsp;<span class="iconfont icon-dot"></span><a href="#"
                                    style="text-decoration: none;">&nbsp;&nbsp;上衣</a>
                                <img src="images/arrow.jpg" align="right" class="arrow" />
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;&nbsp;<span class="iconfont icon-dot"></span>&nbsp;&nbsp;下装
                                <img src="images/arrow.jpg" align="right" class="arrow" />
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;&nbsp;<span class="iconfont icon-dot"></span>&nbsp;&nbsp;连衣裙
                                <img src="images/arrow.jpg" align="right" class="arrow" /></td>
                        </tr>
                        <tr>
                            <td>&nbsp;&nbsp;<span class="iconfont icon-dot"></span>&nbsp;&nbsp;内衣
                                <img src="images/arrow.jpg" class="arrow" align="right" /></td>
                        </tr>
                        <tr>
                            <th bgcolor="#e5e4e1" align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;女装</th>
                        </tr>
                        <tr>
                            <td>&nbsp;&nbsp;<span class="iconfont icon-dot"></span><a href="#"
                                    style="text-decoration: none;">&nbsp;&nbsp;上衣</a>
                                <img src="images/arrow.jpg" align="right" class="arrow" />
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;&nbsp;<span class="iconfont icon-dot"></span>&nbsp;&nbsp;下装
                                <img src="images/arrow.jpg" align="right" class="arrow" />
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;&nbsp;<span class="iconfont icon-dot"></span>&nbsp;&nbsp;连衣裙
                                <img src="images/arrow.jpg" align="right" class="arrow" /></td>
                        </tr>
                        <tr>
                            <td>&nbsp;&nbsp;<span class="iconfont icon-dot"></span>&nbsp;&nbsp;内衣
                                <img src="images/arrow.jpg" class="arrow" align="right" /></td>
                        </tr>
                        <tr>
                            <td class="left" valign="top">
                                <table border="0" cellspacing="0" cellpadding="0" class="table1">
                                    <tr>
                                        <th bgcolor="#e5e4e1" align="left">
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;猜 你 喜 欢</th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <br />
                                            <img src="images/a.jpg" width="350px" height="300px" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <br />
                                            <img src="images/a.jpg" width="350px" height="300px" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <br />
                                            <img src="images/a.jpg" width="350px" height="300px" />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <table border="0" cellspacing="0" cellpadding="0" width="800" style="float: right; margin: 0;">
            <tr>
                <td align="center">
                    <table border="0" cellspacing="0" cellpadding="0" width="100%">
                        <tr>
                            <td align="center" valign="top">
                                <img src="images/a.jpg" width="750" height="450" style=" margin-top: 0; float: right" />
                            </td>
                            <td valign="top">
                                <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                    <tr>
                                        <td>
                                            <table border="0" cellspacing="1" cellpadding="0" width="100%"
                                                bgcolor="#eeeeee">
                                                <tr>
                                                    <td height="35">公告</td>
                                                </tr>
                                                <tr>
                                                    <td bgcolor="#ffffff">
                                                        <table width="95%">
                                                            <tr>
                                                                <td height="30">李主任点赞第一村</td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </table>
                                            <!--公告 end-->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="8"></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <!--商品推荐区-->
                                            <table width="100%" bgcolor="#f7f7f7">
                                                <tr>
                                                    <td align="center">
                                                        <img src="images/b.jpg" width="80" ;height="35" />
                                                    </td>
                                                    <td align="center">
                                                        <img src="images/b.jpg" width="80" ;height="35" />
                                                    </td>
                                                    <td align="center">
                                                        <img src="images/b.jpg" width="80" ;height="35" />
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
    
    </html>
    
    评论

报告相同问题?

悬赏问题

  • ¥15 HFSS 中的 H 场图与 MATLAB 中绘制的 B1 场 部分对应不上
  • ¥15 如何在scanpy上做差异基因和通路富集?
  • ¥20 关于#硬件工程#的问题,请各位专家解答!
  • ¥15 关于#matlab#的问题:期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707,使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错,维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯:Person is not mapped,如何解決?