当
标签调整大小时脱离了它的父
,我怎么能
让它响应并留在
HTML 代码中。这就是我
想用 HTML 和 CSS 实现:我尝试将所有内容包装在一个 div 中,这样我就可以使用绝对元素来控制元素,这样我就可以将它居中。
提前感谢您的建议,以帮助我在未来制作精美的网站。
@import url('https://fonts.googleapis.com/css?family=Didact+Gothic');
html,body {
height: 100%;
}
body {
margin: 0;
background-color: #eee;
}
header {
height: 100vh;
background-size: cover;
position: relative;
height: 100%;
background-image: url("/images/background.jpeg")
}
.text {
position: relative;
width: 100%;
height: 100%;
}
.text1 {
font-size: 35vh;
position:absolute;
top: 5%;
left: 5%;
color: #fff;
font-weight: bold;
margin: 0;
height: auto;
}
.text2 {
margin: 0;
font-size: 35vh;
position:absolute;
left:33%;
top: 40%;
font-size: 5vh;
text-transform: uppercase;
}
.text3 {
position:absolute;
left: 15%;
top: 50%;
width: 50vh;
height: auto;
margin: 0;
font-weight: 4vh;
font-weight: bold;
font-style: italic;
font-family: 'Didact Gothic', sans-serif;
color: #fff;
}
.text4 {
position:absolute;
left: 15%;
top: 65%;
margin: 0;
width: 50vh;
font-weight: bold;
font-style: italic;
color: #fff;
font-family: 'Didact Gothic', sans-serif;
}
<header id="showcase">
<div class="text">
<h1 class="text1">-20%</h1>
<h1 class="text2">Rabbat</h1>
<p class="text3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel facilisis volutpat est velit egestas dui.
</p>
<p class="text4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel facilisis volutpat est velit egestas dui.
</p>
</div>
</header>
最佳答案
在你的 head 标签中使用它,并且尽量不要对内部控件使用绝对位置
<style>
p{
work-break: break-all;
}
</style>
关于html - 我可以改进什么来进行响应式设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55716701/