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％，但您可以使用内联设置为表格提供550px宽度：

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

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

与图像相似......

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

1 个答案: