移动布局不占用 100% 宽度
Mobile Layout not taking 100% width
请帮助我不知道如何使 table 容器占用 100% 宽度。
我正在 phone 中预览 HTML，分辨率为 375px，但右侧似乎有白色 space 区域。我已经尝试将 min-width 更改为 375px，将 table-layout 更改为 auto 和 width: 100%
出于某种原因，我什至无法在 Javascript/HTML/CSS 代码段中添加代码，不断让我的内容主要包含代码。
但这里是 link 到 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, Helvetica Neue, Helvetica, 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, 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, Helvetica Neue, Helvetica, 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>
您有一个 div 元素，它获得 100% 宽度 用于 hyaving class .col 和 20px 填充-left 因为有 id #content_con。
因此，它是 100% + 20px 宽。
您可以通过添加 box-sizing.
在宽度计算中包括去填充
#content_con {
padding-left: 20px;
box-sizing: border-box;
}
顺便说一下，您的 <meta>、<title> 和 <style> 标签属于 <head> 而不是 <body>！
请帮助我不知道如何使 table 容器占用 100% 宽度。
我正在 phone 中预览 HTML，分辨率为 375px，但右侧似乎有白色 space 区域。我已经尝试将 min-width 更改为 375px，将 table-layout 更改为 auto 和 width: 100%
出于某种原因，我什至无法在 Javascript/HTML/CSS 代码段中添加代码，不断让我的内容主要包含代码。 但这里是 link 到 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, Helvetica Neue, Helvetica, 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, 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, Helvetica Neue, Helvetica, 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>
您有一个 div 元素，它获得 100% 宽度 用于 hyaving class .col 和 20px 填充-left 因为有 id #content_con。
因此，它是 100% + 20px 宽。
您可以通过添加 box-sizing.
在宽度计算中包括去填充#content_con {
padding-left: 20px;
box-sizing: border-box;
}
顺便说一下，您的 <meta>、<title> 和 <style> 标签属于 <head> 而不是 <body>！