0

我目前正在学习 udemy 的 html/css 课程，现在我尝试使网站具有响应性。在此屏幕截图中，您可以看到网站在“正常”屏幕尺寸下的外观。我做了三行，所以即使一个名字需要两行文本，一切都在同一水平上。

现在我遇到的问题是，当宽度变小时，行会显示在彼此下方。那完全没问题，但现在工作和社会联系都在底部，而不是在他们所属的画面之下。我认为当你看图片截图小窗口宽度时更容易理解。

当然，我可以编写第二个带有其他排列的 html 代码，并在窗口宽度较小时显示它。但这意味着很多重复的代码。如果我以后想更改图片或其他内容，则必须在两个代码段落上都进行更改。所以我正在寻找一个“更清洁”的解决方案。

是否有一个选项可以告诉 css 当宽度变小时它应该显示彼此下方的列而不是行？

PS：我正在使用骨架。

这是html代码：

<div class="team" id="team">
            <div class="container">
                <h2 class="team-heading">Amazing <strong>Team</strong></h2>
                <p class="team-subheading">These wonderful people make work enjoyable.</p>

                <div class="row">
                    <div class="four columns">
                        <img src="img/employee-1.jpg" class="team-image" alt="Team member 1">
                        <p class="team-name">John Doe</p>
                    </div>
                    <div class="four columns">
                        <img src="img/employee-2.jpg" class="team-image" alt="Team member 2">  
                        <p class="team-name">Richard Miles</p>                   
                    </div>
                    <div class="four columns">
                        <img src="img/employee-3.jpg" class="team-image" alt="Team member 3">
                        <p class="team-name">Maximilian Mustermann</p>                      
                    </div>
                </div>
                <div class="row">
                    <div class="four columns">
                        <p class="team-occupation">Marketer</p>
                    </div>
                    <div class="four columns">
                        <p class="team-occupation">Coder</p>                    
                    </div>
                    <div class="four columns">
                        <p class="team-occupation">Graphic Designer<br />3D-Artist</p>                       
                    </div>
                </div>
                <div class="row">
                    <div class="four columns">
                        <div class="team-sociallinks">
                            <a class="team-sociallink" href="https://twitter.com/" target="_blank">
                                <i class="fab fa-twitter" aria-hidden="true"></i>
                            </a>
                            <a class="team-sociallink" href="https://facebook.com" target="_blank">
                                <i class="fab fa-facebook-f" aria-hidden="true"></i>
                            </a>
                            <a class="team-sociallink" href="https://www.pinterest.de/" target="_blank">
                                <i class="fab fa-pinterest-p" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                    <div class="four columns">
                        <div class="team-sociallinks">
                            <a class="team-sociallink" href="https://facebook.com" target="_blank">
                                <i class="fab fa-facebook-f" aria-hidden="true"></i> 
                            </a>            
                            <a class="team-sociallink" href="https://stackoverflow.com" target="_blank">
                                <i class="fab fa-stack-overflow" aria-hidden="true"></i> 
                            </a>           
                        </div>
                    </div>
                    <div class="four columns">
                        <div class="team-sociallinks">
                            <a class="team-sociallink" href="https://twitter.com/" target="_blank">
                                <i class="fab fa-twitter" aria-hidden="true"></i>
                            </a>             
                            <a class="team-sociallink" href="https://facebook.com" target="_blank">     
                                <i class="fab fa-facebook-f" aria-hidden="true"></i> 
                            </a>          
                            <a class="team-sociallink" href="https://www.pinterest.de/" target="_blank"> 
                                <i class="fab fa-pinterest-p" aria-hidden="true"></i> 
                            </a>           
                            <a class="team-sociallink" href="https://www.youtube.com/" target="_blank">
                                <i class="fab fa-youtube" aria-hidden="true"></i>
                            </a>          
                        </div>
                    </div>
                </div>
                <p class="team-text">
                    At vero eos et accusam et justo duo dolores et ea rebum. 
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    At vero eos et accusam et justo duo dolores et ea rebum. 
                </p>
            </div>
        </div>

我希望这个问题很清楚。如果没有，请发表评论，我会尝试添加缺失的信息。

4

1 回答 1

0

是否有一个选项可以告诉 css 当宽度变小时它应该显示彼此下方的列而不是行？

我不确定这是这里的问题。您可以简单地重新构建您的标记，以便将每个人的信息一起保存在同一列中。

下面的示例显示了工作信息从其自己的行移动到每个人的姓名下方，这应该为您提供不同屏幕尺寸的正确布局。您可以对社交媒体图标执行相同的操作。

小提琴

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="team" id="team">
  <div class="container">
    <h2 class="team-heading">Amazing <strong>Team</strong></h2>
    <p class="team-subheading">These wonderful people make work enjoyable.</p>

    <div class="row">
      <div class="four columns">
        <img src="https://unsplash.it/200" class="team-image" alt="Team member 1">
        <p class="team-name">John Doe</p>
        <p class="team-occupation">Marketer</p>
      </div>
      <div class="four columns">
        <img src="https://unsplash.it/200" class="team-image" alt="Team member 2">
        <p class="team-name">Richard Miles</p>
        <p class="team-occupation">Coder</p>
      </div>
      <div class="four columns">
        <img src="https://unsplash.it/200" class="team-image" alt="Team member 3">
        <p class="team-name">Maximilian Mustermann</p>
        <p class="team-occupation">Graphic Designer<br />3D-Artist</p>
      </div>
    </div>

    <div class="row">
      <div class="four columns">
        <div class="team-sociallinks">
          <a class="team-sociallink" href="https://twitter.com/" target="_blank">
            <i class="fab fa-twitter" aria-hidden="true"></i>
          </a>
          <a class="team-sociallink" href="https://facebook.com" target="_blank">
            <i class="fab fa-facebook-f" aria-hidden="true"></i>
          </a>
          <a class="team-sociallink" href="https://www.pinterest.de/" target="_blank">
            <i class="fab fa-pinterest-p" aria-hidden="true"></i>
          </a>
        </div>
      </div>
      <div class="four columns">
        <div class="team-sociallinks">
          <a class="team-sociallink" href="https://facebook.com" target="_blank">
            <i class="fab fa-facebook-f" aria-hidden="true"></i>
          </a>
          <a class="team-sociallink" href="https://stackoverflow.com" target="_blank">
            <i class="fab fa-stack-overflow" aria-hidden="true"></i>
          </a>
        </div>
      </div>
      <div class="four columns">
        <div class="team-sociallinks">
          <a class="team-sociallink" href="https://twitter.com/" target="_blank">
            <i class="fab fa-twitter" aria-hidden="true"></i>
          </a>
          <a class="team-sociallink" href="https://facebook.com" target="_blank">
            <i class="fab fa-facebook-f" aria-hidden="true"></i>
          </a>
          <a class="team-sociallink" href="https://www.pinterest.de/" target="_blank">
            <i class="fab fa-pinterest-p" aria-hidden="true"></i>
          </a>
          <a class="team-sociallink" href="https://www.youtube.com/" target="_blank">
            <i class="fab fa-youtube" aria-hidden="true"></i>
          </a>
        </div>
      </div>
    </div>
    <p class="team-text">
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum.
    </p>
  </div>
</div>

于 2018-03-09T22:54:13.810 回答