如何使此页面响应

Question

当我尝试调整屏幕大小时，图片旁边的列表超出了边框，页面底部的最后一张图片也超出了边框，我怎样才能让它响应所以它可以在屏幕较小或中等时缩小图像，这是 html 页面的代码 css

h1 {
  text-align: center;
}

ul {
  list-style: none;
}

.flexcontainer {
  display: flex;
  align-items: center;
}

.container {
  padding-top: 1%;
  padding-bottom: 1%;
  margin-top: 1%;
  margin-bottom: 1%;
}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Employee's Page</title>
    <link rel="stylesheet" href="./assets/css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
</head>

<body>

    <h1>Ahmed Haiba</h1>

    <div class="container" style="border:1px solid #000000;">
        <div class="flexcontainer">
            <div>
                <img src="http://placehold.it/350x250">
            </div>
            <div>
                <ul>
                    <li>
                        <h3>Full name: Ahmed Haiba</h3>
                    </li>
                    <li>
                        <h3>Gender: Male</h3>
                    </li>
                    <li>
                        <h3>Phone number: +9980989798</h3>
                    </li>
                    <li>
                        <h3>Company: AST</h3>
                    </li>
                    <li>
                        <h3>Address: 661 Terrace Place, Elliott, Ohio, 9927</h3>
                    </li>
                </ul>
            </div>
        </div>

        <div>
            <h3>About employee:</h3>
            <p>Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.</p>
        </div>

        <div>
            <h3>Employee was registered in the system: 2014-12-10T07:18:10 +02:00</h3>
        </div>

        <div>
          <img src="http://placehold.it/500x250">
        </div>
    </div>
</body>
</html>

如果您尝试调整屏幕大小，您会注意到只有列表超出了边框，底部的最后一张图像超出了边框，您能帮我解决这个问题吗？我希望列表在调整屏幕大小时下移图像

Answer 1

首先，您需要将 max-width: 100% 添加到 img 选择器。这将防止所有图像超出其各自的容器。

这也解决了文本超出容器的问题，但会导致顶部图像在窄宽度下变得相当小。为了解决这个问题，我还建议添加一个媒体查询（比如，768px），从 .flexcontainer 中删除 display: flex。我还建议将 text-align: center 添加到包含两个图像的两个 <div> 元素，以便将它们水平居中。我给了他们 class .image 让这更容易。

这可以在下面看到：

h1 {
  text-align: center;
}

ul {
  list-style: none;
}

.flexcontainer {
  display: flex;
  align-items: center;
}

.container {
  padding-top: 1%;
  padding-bottom: 1%;
  margin-top: 1%;
  margin-bottom: 1%;
}

img {
  max-width: 100%;
}

@media screen and (max-width: 768px) {
  .flexcontainer {
    display: block;
  }
  .image {
    text-align: center;
  }
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Employee's Page</title>
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>

  <h1>Ahmed Haiba</h1>

  <div class="container" style="border:1px solid #000000;">
    <div class="flexcontainer">
      <div class="image">
        <img src="http://placehold.it/350x250">
      </div>
      <div>
        <ul>
          <li>
            <h3>Full name: Ahmed Haiba</h3>
          </li>
          <li>
            <h3>Gender: Male</h3>
          </li>
          <li>
            <h3>Phone number: +9980989798</h3>
          </li>
          <li>
            <h3>Company: AST</h3>
          </li>
          <li>
            <h3>Address: 661 Terrace Place, Elliott, Ohio, 9927</h3>
          </li>
        </ul>
      </div>
    </div>

    <div>
      <h3>About employee:</h3>
      <p>Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est
        anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.</p>
    </div>

    <div>
      <h3>Employee was registered in the system: 2014-12-10T07:18:10 +02:00</h3>
    </div>

    <div class="image">
      <img src="http://placehold.it/500x250">
    </div>
  </div>
</body>

</html>

Answer 2

你应该像这样使用媒体查询，并将 .flexcontainer 显示为 display: block;。

试试这个：https://jsfiddle.net/o762ct48/

@media screen  and (max-width: 767px){
    .flexcontainer {
        display: block;
        align-items: center;
    }
}

Answer 3

如果您想让页面响应，您还应该尝试使页面中的图像响应视口大小。

在大宽度显示器上看起来不错的图像在小宽度显示器上可能看起来不太好，反之亦然。

此链接将帮助您学习和理解如何使图像响应：

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

https://www.w3schools.com/tags/att_source_srcset.asp

如何使此页面响应

how to make this page responsive

html

css

responsive