Question

我最近一直在练习一些CSS并且已经取得了一些进展，但如果它的位置被设置为 relative ，我似乎无法弄清楚如何使div具有移动响应能力。它包含在另一个设置为 display：flex; 。

的div中

我尝试修改div上的左右边距，但是当调整视口大小以模拟小型或移动设备的屏幕时，这似乎没有达到调整div大小所需的效果。

如果有人不介意在我的代码中快速达到峰值以查看我可能遗漏的地方或我可能出错的地方，我将非常感谢您的帮助！（如果有人碰巧对我的代码有任何一般性建议，那也会受到赞赏 - 我不是最好用CSS，所以任何反馈肯定会受到赞赏！）

请参阅下面的HTML和CSS代码。

谢谢，

杰米

body{
  background-color: #bed3f4;
  margin: 0px;
  padding: 0px;
}

.navbar{
  height: 50px;
  width: 100%;
  background-color: white;
}

.logo{
  font-size: 18px;
  font-family: cursive;
  padding-top: 8px;
  padding-left: 5px;
}

.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile_image{
  height: 200px;
  width: 200px;
  background-color: #c2c4c6;
  border-radius: 5px;
  position: absolute;
  top: 10%;
}

.profile_box{
  position: relative;
  top: 20%;
  height: 600px;
  width: 500px;
  background-color: #fff;
  border-radius: 5px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 200px;
  margin-left: 20px;
  margin-right: 20px;
}

.name{
  height: 30px;
  width: 200px;
  text-align: center;
  margin-top: 60px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  font-weight: bold;
  font-family: Arial;
}

.user_bio{
  position: relative;
  width: 480px;
  height: 450px;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
  padding: 10px;
  font-style: Arial;
}

.user_social_icons{
  position: relative;
  width: 100%;
  height: 30px;
  margin-top: 100px;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
  word-spacing: 10px;
}

<html>
  <head>
    <title>Personal Profile Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
  </head>
  <body>

    <div class="navbar">
      <div class="logo">Profile Page</div>
    </div>

    <div class="container">

      <div class="profile_box">

        <div class="name">Jamie McGibbon</div>

        <div class="user_bio">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper nulla id leo eleifend, in mattis diam pretium. Proin pellentesque ultrices consectetur. Etiam eget magna leo. Aliquam condimentum nisi leo, vel cursus lorem placerat vitae.</p>

          <p>Quisque pulvinar id sapien eu dapibus. Vestibulum risus dui, aliquam sit amet congue non, egestas a leo. Nam sed eleifend diam. Nullam ultrices vel dolor et mattis. Praesent eu euismod nisl. Ut quis dolor risus. Proin sem diam, hendrerit in dui sit amet, faucibus vulputate ex. Curabitur molestie rhoncus ligula varius scelerisque.</p>

          <div class="user_social_icons">
            <i class="fab fa-facebook-square fa-3x"></i>
            <i class="fab fa-twitter-square fa-3x"></i>
            <i class="fab fa-reddit-square fa-3x"></i>
            <i class="fab fa-github-square fa-3x"></i>
            <i class="fab fa-youtube-square fa-3x"></i>
          </div>

        </div>

      </div>

      <div class="profile_image"></div>

    </div>

  </body>
</html>

Answer 1

一些建议..

您可以在此处删除定位规则。 text-align似乎做你需要的。从主要内容中删除固定的宽度和高度，这是导致子元素溢出的原因。

很高兴回答进一步的问题。

＆＃13;

body {
  background-color: #bed3f4;
  margin: 0;
}

.navbar {
  height: 50px;
  width: 100%;
  background-color: white;
}

.logo {
  font-size: 18px;
  font-family: cursive;
  padding-top: 8px;
  padding-left: 5px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 100px;
}

.profile_image {
  height: 200px;
  width: 200px;
  background-color: #c2c4c6;
  border-radius: 5px;
  position: relative;
  z-index: 1;
  margin-top: 20px;
  margin-bottom: -20px;
}

.profile_box {
  width: 70%;
  background-color: #fff;
  border-radius: 5px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 50px;
}

.name {
  text-align: center;
  margin-top: 60px;
  font-size: 20px;
  font-weight: bold;
}

.user_bio {
  border-radius: 5px;
  padding: 10px;
  font-style: Arial;
  text-align: center;
}

.user_social_icons {
  margin-top: 100px;
  text-align: center;
  border-radius: 5px;
  word-spacing: 10px;
}

＆＃13;

<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
<div class="navbar">
  <div class="logo">Profile Page</div>
</div>

<div class="container">
  <div class="profile_image"></div>
  <div class="profile_box">

    <div class="name">Jamie McGibbon</div>

    <div class="user_bio">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper nulla id leo eleifend, in mattis diam pretium. Proin pellentesque ultrices consectetur. Etiam eget magna leo. Aliquam condimentum nisi leo, vel cursus lorem placerat vitae.</p>

      <p>Quisque pulvinar id sapien eu dapibus. Vestibulum risus dui, aliquam sit amet congue non, egestas a leo. Nam sed eleifend diam. Nullam ultrices vel dolor et mattis. Praesent eu euismod nisl. Ut quis dolor risus. Proin sem diam, hendrerit in dui
        sit amet, faucibus vulputate ex. Curabitur molestie rhoncus ligula varius scelerisque.</p>

      <div class="user_social_icons">
        <i class="fab fa-facebook-square fa-3x"></i>
        <i class="fab fa-twitter-square fa-3x"></i>
        <i class="fab fa-reddit-square fa-3x"></i>
        <i class="fab fa-github-square fa-3x"></i>
        <i class="fab fa-youtube-square fa-3x"></i>
      </div>

    </div>

  </div>



</div>

＆＃13;

CSS - 响应相对灵活分组

1 个答案: