在div中定位和调整div元素的大小

我在CodePen上有以下code，我试图从头创建一个网站。每个部分都将成为自己的完整页面，这就是我创建部分课程的原因。在我的第一部分（约）中，我创建了两个div。最终我希望它看起来像这样，不管浏览器的尺寸是多少 this image 。当窗口被调整大小时，内容应该自动调整大小以适应屏幕。但是，当窗口变小时（尽管我将位置设置为绝对），迄今为止的代码会移动aboutInfo。在div中定位和调整div元素的大小

我迄今为止代码：

#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的，甚至只是margin和padding的修复。在这一点上，我不确定哪种解决方案最适合，哪一种更易于使用。

所以总结一下我的问题：

如何解决aboutInfo的位置，以保持它走动？
如何自动调整整个网站的内容以适合任何大小的浏览器？

来源

2017-10-11 dollaza

如果什么视口非常小，不能容纳文本和红色矩形？布局策略是什么？ – Terry

因此，您希望这两个div保持原样位置，但位于屏幕中央？ – hermbit

您是否希望箱子内的文字根据屏幕大小而增长？ – victmo

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; 
}

来源

2017-10-12 04:35:55 Gautam

试试这个造型，我已经更新了你的CSS使用柔性用于定位

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; 
}

来源

2017-10-11 18:54:58 Gautam

非常感谢！有没有办法像上面的图片一样移动这两个div元素？我尝试使用左侧和右侧，但它没有工作。 – dollaza

在下面检查我的安装程序，只需将左边的mergin改为按照您的requiremnt放置即可。请标记为答案，如果有帮助:) – Gautam

使用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.

来源

2017-10-11 19:02:58 hermbit

在div中定位和调整div元素的大小

回答

相关问题