Question

这是我第一次在Stack Overflow上发帖，所以请耐心等待。我一直试图让设计响应，我发现了一些令人恼火的问题。我会抓住指向我正在谈论的网页的链接，如果您正在接受挑战，可以查看它：http://www.rattlingskeleton.tk/

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

我会输入与这些部分相关的所有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

看来你的媒体＆＃34;尺寸图片没有设定的宽度或最大宽度。图片旁边的文字的设置宽度为48％。您在文本上使用了4％的保证金，但这还不够，因为该元素试图占据父母的48％。
推荐图片设置为左边距：55px。虽然文本列是margin-left：0px。在我的高分辨率上，推荐图像并不以全屏为中心。我认为55px可能会全屏显示在较小的显示器上。

Answer 2

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

对于第二个我无法发现任何问题，如果你想在小于960的屏幕中显示文本部分，那么尝试添加与此部分相关的JS / css（媒体）代码以便更好地查看。 / p>

对齐＆amp;重叠问题（Skeleton.css）

2 个答案: