在div

Question

我在CodePen上有以下code，我试图从头开始创建一个网站。每个部分都将是它自己的完整页面，这就是我创建section类的原因。在我的第一部分（约）中，我创建了两个div。最终，无论浏览器的大小是，我都希望它看起来像这样。调整窗口大小时，内容应自动调整大小以适应屏幕。但是到目前为止我的代码在窗口变小时移动了aboutInfo（即使我将位置设置为绝对值）。

到目前为止我的代码：

#about {
  background-color: #D1C9BE;
  position: relative;
}

#aboutImage {
  border-style: dashed;
  border-color: red;
  background-color: white;

  position: absolute;
  height: 150px;
  width: 150px;
  top: 50%;
  transform: translateY(-50%);
  left: 300px;
}

#aboutInfo {
  border-style: dotted;
  border-color: black;
  background-color: white;
  font-size: 35px;
  text-align: right;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 200px;
}

我已经研究了一些修复，我已经读过我可以使用Flexbox，jQuery，甚至只是修复了边距和填充。在这一点上，我不确定哪种解决方案最有效，哪种解决方案更容易使用。

总结一下我的问题：

1. 如何修复aboutInfo的位置以防止它移动？

2. 如何自动调整整个网站的内容以适应任何大小的浏览器？

Answer 1

尝试这种造型，我已经更新了你的css以使用flex进行定位

   body {
    margin: 0;
}

html, body {
    height:100%;
    position: relative;
}

/* FULLPAGE */
.section {
    height: 100vh;
     display: flex;
    justify-content: space-around;
  align-items: center;

}

/* ABOUT */
#about {
    background-color: #D1C9BE;
    position: relative;
}

#aboutImage {
    border-style: dashed;
    border-color: red;
    background-color: white;
    height: 150px;
    width: 150px;
}

#aboutInfo {
    border-style: dotted;
    border-color: black;
    background-color: white;

    font-size: 35px;
    text-align: right;

}

#aboutInfo p {
    font-size: 15px;
}


/* SKILLS */
#section2 {
    background-color: #D8B17B;
}

/* PROJECTS */
#section3 {
    background-color: #9E9283;
}

/* OTHER */
#section4 {
    background-color: #70614C;
}

Answer 2

使用flex制作响应式div。 不要使用绝对定位。

以下是更新的Codepen。

.section {
    display: flex;
    padding: 0 48px; /* adds space to edges of screen */
    align-items: center; /* vertical centering */
}

.section > :first-child {
    margin-right: 48px; /* sets distance between boxes */
}

Here is a great article from MDN on using flex.

Answer 3

body {
    margin: 0;
}

html, body {
    height:100%;
    position: relative;
}

/* FULLPAGE */
.section {
    height: 100vh;
     display: flex;
    justify-content: center;
  align-items: center;

}

/* ABOUT */
#about {
    background-color: #D1C9BE;
    position: relative;
}

#aboutImage {
    border-style: dashed;
    border-color: red;
    background-color: white;
    height: 150px;
    width: 150px;
}

#aboutInfo {
    border-style: dotted;
    border-color: black;
    background-color: white;
    margin-left: 20px;
    font-size: 35px;
    text-align: right;

}

#aboutInfo p {
    font-size: 15px;
}


/* SKILLS */
#section2 {
    background-color: #D8B17B;
}

/* PROJECTS */
#section3 {
    background-color: #9E9283;
}

/* OTHER */
#section4 {
    background-color: #70614C;
}