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

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>

请注意，我确实将我所有页面上的视口(viewport)元标记应用到初始比例 1.0。

Answer 1

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

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

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

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

与图像类似...