在响应式设计中，我的图像被截断，表格段落在右侧被截断

Question

在阅读了许多文章之后，我似乎无法找到关于为什么我的图像在右侧没有边距并且我的表格段落文本在右侧被截断的答案。段落文本在我的其他页面上很好，只是在表格中它被切断了。 这都是使用 css3 媒体查询响应式设计。这发生在我为客户建立的另一个网站上。任何见解将不胜感激！ 谢谢！ 这是我对手机屏幕的 CSS 媒体查询：

@charset "utf-8";
@import url("phone.css") only screen and (max-width:320px);
container {
width: 100%;
height: 100%;
 }
#header img {
    position: relative;
    height: auto;
    width: auto;
    max-height:100%;
    max-width:100%;
    min-height:100%;
    min-width:100%;
    overflow:hidden;
}
#navigation {
    font-size:large;
    height: auto;
    width:100%;
    float:none;
    overflow:hidden;


}
#menu {
    float:none;
    margin:0px;
    display:none;
    width:100%;
    position:relative;
    list-style-type:none;
}
.nav-btn {
    width:100%;
    background-color:#09F;
    text-align:center;
    box-sizing:border-box;
    padding:15px 10px;
    font-weight:bold;
    font-size:large;
    text-align:center;
    cursor:pointer;
    display:block;
    height:100%;
}
.nav-btn:after {
    content:url(images/mobilemenu.png);

}
#menu li {
        width:100%;
        font-size:large;
        font-weight:bold;
        background-color:#09F;
        display:block;
        margin:0px;
        border:#000 medium solid;
        float:none;
        overflow:hidden;
        text-align:center;
}

#menu img {
    margin:0px;
    padding:0px;
    width:90px;
    height:90px;
    position:relative;

}

#navigation ul li {
    margin:0px;
    width:100%;
    position:relative;
    float:none;
    overflow:hidden;

}

#menu li a {
    width:100%;
    display:block;

}

#content {
    width:100%;
    height:100%;

}


.socialmedia {
    width:30px;
    height:30px;
    max-width:30px;
    max-height:30px;

}




.bigfoot {
    width:50px;
    height:50px;
    max-width:200px;
    max-height:200px;
}




#content img {

    height:auto;
    width:100%;
    position:relative;
    overflow:hidden;
    margin:5px;
}

#content table, tbody, th, td, tr {
    display:block;



}
#content table {
    border-collapse: collapse;
    width: 100%;
    height: auto;
    padding: 10px;
    position: relative; 
    min-width:320px;
}

#content td p {
    position: relative;
    margin: auto;
    text-align: center;
    padding: 5px;
    min-width: 100%;
    min-height: 100%;



}


#content tr {
    position:relative;
    width:100%;
    height:auto;
    overflow:hidden;
}

#content td {
    position:relative;
    width:100%;
    height:auto;
    min-width:100%;
    min-height:100%;
    overflow:hidden;
}


#content tr td img {
    width:100%;
    height:auto;
    max-height:250px;
    max-width:250px;

}



#footer {
    width:100%;
    height:100%;
}

还有我的页面html：

<div style="background-image:url(images/beer%20content%20background2.jpg)" id="content"> 

  <h1 align="center">Our Beers</h1>
  <p>

  <table class="beers" align="center" width="550" border="0" cellspacing="5" cellpadding="5">
  <tr>
    <td>
    <img src="images/Alberts_Web.png" alt="albert's ale" width="350"/>
    <p>Albert's Ale is a German inspired beer with a crisp malt base, and 2 varieties of hops. This pale ale is hoppy, and a real refreshing thirst quencher. Enjoy year round! <br />6% Alcohol.</p>
    </td>
    <td>
    <img src="images/Hieroglyph_Web.png" alt="Hieroglyph"width="350"/>
    <p> Hieroglyph is a double IPA. 8% Alcohol.</p>
    </td>
  </tr>
  <tr>
    <td>
    <img src="images/Trapezeious_Web.png" alt="Trapezious" width="350"/>

    </td>
    <td>
    <img src="images/Sifu_Web.png" alt="Sifu" width="350"/>

    </td>
  </tr>

</table>
<h2 align="center">Occasional & Seasonal brews</h2>
  <table class="beers" align="center" width="550" border="0" cellspacing="5" cellpadding="5">
  <tr>
    <td>
    <img src="images/Krock'd_Web.png" alt="Krock'd" width="350"/>

    </td>
    <td>
    <img src="images/Viking_Web.png" alt="I Wish I was a Viking" width="350"/>
    </td>
  </tr>
  <tr>
    <td>
    <img src="images/Fat Bobby_Web.png" alt="Fat Bobby" width="350"/>

    </td>
    <td>&nbsp;</td>
  </tr>
</table>



  </p>

  <br />
  <p align="center">Check out our upcoming events where we will be sampling our beer!</p>
  <p align="center">Cheers!</p>
</div>
<!-- InstanceEndEditable -->

</div>
</body>
<!-- InstanceEnd --></html>

快速说明，我确实将所有页面上的视口元标记应用到初始比例 1.0。

Answer 1

首先：您发布的代码中没有媒体查询...

除此之外：虽然 在 CSS 中您将表格的宽度定义为 100%，但您有内联设置，表格宽度为 550 像素：

<table class="beers" align="center" width="550" border="0" cellspacing="5" cellpadding="5">

我想这就是它们不适合移动屏幕的原因。删除所有干扰 CSS 的内联内容。

图片也一样...