移动版式未采用100%宽度

请帮助我不知道如何使表格容器采用100%的宽度。 我正在预览手机中的HTML,宽度为375px,但是右侧似乎有空白区域。我已经尝试将min-width更改为375px,将表布局更改为auto和width:100%

移动版式未采用100%宽度

由于某种原因,即使在Javascript / HTML / CSS代码段中,我也无法添加代码,因此我的内容中大部分都包含代码。 但这是HTML代码的链接-

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">

<head></head>

<body class="clean-body" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #F5F5F5;">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width" name="viewport">
    <meta content="IE=edge" http-equiv="x-ua-compatible">
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        
        ol > li,ul > li,p,span,h1,h2,h3,h4,h5,h6,h7 {
            font-size: 14px;
        }
        
        table,td,tr {
            vertical-align: top;
            border-collapse: collapse;
        }
        
        * {
            line-height: inherit;
        }
        
        a[x-apple-data-detectors=true] {
            color: inherit !important;
            text-decoration: none !important;
        }
    </style>
    <style id="media-query" type="text/css">
        @media (max-width: 670px) {
            #content_con {
                padding-left: 20px;
            }
            .block-grid,.col {
                min-width: 375px !important;
                max-width: 100% !important;
                display: block !important;
            }
            .block-grid {
                width: 100% !important;
            }
            .col {
                width: 100% !important;
            }
            .col>div {
                margin: 0 auto;
            }
            img.fullwidth,img.fullwidthOnmobile {
                max-width: 100% !important;
            }
            .no-stack .col {
                min-width: 0 !important;
                display: table-cell !important;
            }
            .no-stack.two-up .col {
                width: 50% !important;
            }
            .no-stack .col.num4 {
                width: 33% !important;
            }
            .no-stack .col.num8 {
                width: 66% !important;
            }
            .no-stack .col.num4 {
                width: 33% !important;
            }
            .no-stack .col.num3 {
                width: 25% !important;
            }
            .no-stack .col.num6 {
                width: 50% !important;
            }
            .no-stack .col.num9 {
                width: 75% !important;
            }
            .video-block {
                max-width: none !important;
            }
            .mobile_hide {
                min-height: 0px;
                max-height: 0px;
                max-width: 0px;
                display: none;
                overflow: hidden;
                font-size: 0px;
            }
            .desktop_hide {
                display: block !important;
                max-height: none !important;
            }
        }
    </style>
    <table bgcolor="#F5F5F5" cellpadding="0" cellspacing="0" class="nl-container" role="presentation" style="table-layout: fixed;vertical-align: top;min-width: 380px;Margin: 0 auto;border-spacing: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color: #F5F5F5;/* width: 100%; */border: 1px solid black;" valign="top" width="100%">
        <tbody>
            <tr style="vertical-align: top;" valign="top">
                <td style="word-break: break-word; vertical-align: top;" valign="top">
                    <div style="background-color:transparent;">
                        <div class="block-grid" style="Margin: 0 auto; min-width: 375px; max-width: 650px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #000000;">
                            <div style="border-collapse: collapse;display: table;width: 100%;background-color:#000000;">

                                <div class="col num12" style="min-width: 375px; max-width: 650px; display: table-cell; vertical-align: top; width: 650px;">
                                    <div style="width:100% !important;">
                                        <div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:30px; padding-bottom:30px; padding-right: 15px; padding-left: 15px;">
                                            <div align="center" class="img-container center fixedwidth" style="padding-right: 0px;padding-left: 0px;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="background-color:transparent;">
                        <!-- START CONTENT ROW -->
                        <div class="block-grid mixed-two-up" style="Margin: 0 auto; min-width: 375px; max-width: 650px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #e7f1f8;">
                            <div style="border-collapse: collapse;display: table;width: 100%;background-color:#e7f1f8;">
                                <div class="col num4" style="display: table-cell; vertical-align: top; max-width: 375px; min-width: 216px; width: 216px;">
                                    <div style="width:100% !important;">
                                        <div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top: 15px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
                                            <div style="color:#555555;font-family:Arial,Helvetica Neue,Helvetica,sans-serif;line-height:1.2;padding-top:0px;padding-right:10px;padding-bottom:0px;padding-left:10px;">
                                                <div style="font-family: Arial,sans-serif; font-size: 12px; line-height: 1.2; color: #555555; mso-line-height-alt: 14px;">
                                                    <p style="font-size: 14px; line-height: 1.2; mso-line-height-alt: 17px; margin: 0;"><strong>PRODUCT:</strong></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div id="content_con" class="col num8" style="display: table-cell; vertical-align: top; min-width: 375px; max-width: 432px; width: 433px;">
                                    <div style="width:100% !important;">
                                        <div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:15px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">

                                            <div style="color:#555555;font-family:Arial,sans-serif; font-size: 12px; line-height: 1.2; color: #555555; mso-line-height-alt: 14px;">
                                                    <p style="font-size: 14px; line-height: 1.2; mso-line-height-alt: 17px; margin: 0;">Test</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

ddyyqqrr 回答:移动版式未采用100%宽度

您有一个div元素,用于获得类.col的宽度为 100%宽度,而具有ID为#content_con left-padding-left 。 因此,它是 100%+ 20px宽

您可以通过添加 box-sizing 来在宽度计算中包括填充。

#content_con {
  padding-left: 20px;
  box-sizing: border-box;
}

您的<meta><title><style>标签属于<head>内部,而不是<body>

本文链接:https://www.f2er.com/3088670.html

大家都在问