对齐和重叠问题 (Skeleton.css)

Question

这是我第一次在 Stack Overflow 上发帖，请多多包涵。我一直在尝试使设计具有响应性，但我发现了几个恼人的问题。我会在我正在谈论的页面上添加一个 link，如果你准备好迎接挑战，你可以查看它：http://www.rattlingskeleton.tk/

第一个是当以特定分辨率调整大小时，厨师部分中的文本如何与厨师的照片重叠。第二个是当浏览器 window 调整大小时，评论部分的图像与下面每个受人尊敬的文本框不一致。

我将添加与这些部分相关的所有 CSS 代码：

/* Chef */

.chef {
    margin: 40px;
}

#border {
    border-style: solid;
    border-width: 2px;
    padding: 20px 20px 20px 20px;
}


 /* Testimonials */

.testimonials {
    margin-top: 50px;
}

.testimonials img {
    border-radius: 50%;
    height: 125px;
    width: 125px;
    margin-left: 55px;
    margin-bottom: 27px;
}

.text {
    text-align: center;
    margin-bottom: 30px;
 }

.newcontainer {
  position: relative;
  width: 65%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; 
}

这些是站点在桌面上显示时涉及的 CSS 部分。接下来是 HTML:

      <div class="chef">
      <div class="container" id="border">
        <div class="row">
          <div class="six columns">
            <img id="large" src="images/Jacques-Pauvert-biography.jpg"/>
              <img id="medium" src="images/scaled.jpg"/>
              <img id="small" src="images/cropped-chef.jpg"/>
              </div>
                <div class="six columns"> 
                  <h1>THIS IS A CHEF</h1>
                  <p id="long">Lorem ipsum dolor sit amet, sonet fabulas apeirian an pri. Mea ex euripidis sententiae, nam ea aliquip contentiones. Duo dico probatus concludaturque an, eam ea soluta nostrum, assum putent cu qui. Etiam cetero ius in, no cibo putent suscipiantur est, facilis detracto nominati vel at. Recusabo consectetuer sit cu, esse inani no vis. Vim meliore electram mnesarchum ne, tacimates periculis necessitatibus id pro. Utamur vituperatoribus at sea, partem indoctum per ea. Soleat libris ne nec, cibo dissentiunt ea ius. Diam apeirian est te, vim cu alia suscipit tractatos. Lucilius dissentiunt ad pri, eu aliquid maluisset quo. Eum no consulatu conceptam. Vis cu labores graecis feugait.</p>
                    <p id="short">Lorem ipsum dolor sit amet, sonet fabulas apeirian an pri. Mea ex euripidis sententiae, nam ea aliquip contentiones. Duo dico probatus concludaturque an, eam ea soluta nostrum, assum putent cu qui. Etiam cetero ius in, no cibo putent suscipiantur est, facilis detracto nominati vel at. Recusabo consectetuer sit cu, esse inani no vis.</p>
                      <a class="button" id="about-left" href="#">READ MORE</a>
                       <center><a class="button" id="about-center" href="#">READ MORE</a></center>
                    </div>        
                </div>
              </div>  
            </div>


    <div class="testimonials">
  <div class="newcontainer">
    <div class="row">
      <div class="four columns">
        <img src="images/team1.jpg"/>
          </div>
            <div class="four columns">
             <img src="images/team2.jpg"/>
               </div>
                <div class="four columns">
                  <img src="images/team3.jpg"/>
                    </div>
                      </div>
                         </div>

                          <div class="text">
                          <div class="newcontainer">
                            <div class="row">
                            <div class="four columns">
                              <p><strong>“Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.”</p>
                                </div>
                                 <div class="four columns">
                                  <p><strong>“Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.”</p>
                                    </div>
                                      <div class="four columns">
                                      <p><strong>“Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.”</p>
                                        </div>
                                          </div>
                                            </div>  
                                              </div>
                                                </div>

如果有人能解决这个问题并告诉我他们是怎么做到的，那就太好了；他们会得到我的尊重。祝任何想试一试的人好运。

Answer 1

您的 "medium" 尺寸图片似乎没有设置宽度或最大宽度。图片旁边的文字确实设置了 48% 的宽度。您在文本上使用了 4% 的边距，但这还不够，因为该元素正试图占据父元素的 48%。
感言图片设置为margin-left:55px。而文本列是 margin-left:0px。在我的高分辨率下，推荐图片没有全屏居中。我认为 55px 在全屏显示时可能看起来集中在较小的显示器上。

Answer 2

对于第一个问题，尝试将主要部分的媒体查询从 max-width: 975px 更改为 max-width: 1034px，从 max-width: 550px 更改为 max-width: 730px

对于第二个我找不到任何问题，如果你想在小于 960 的屏幕上显示文本部分然后尝试添加与此部分相关的 JS/css(media) 代码以获得更好的视图.

对齐和重叠问题 (Skeleton.css)

Alignment & Overlapping Issues (Skeleton.css)

css

skeleton-css-boilerplate