HTML/CSS内容在div中与flex重叠
HTML/CSS内容在div中与flex重叠
提问于 2018-09-19 07:05:51
我有下面的HTML/CSS，其中我定位了一个文本和一个以div为中心的标题。但是，如果高度变小，文本内容将超过div大小，标题将显示在文本中。
是否有办法解决这个问题，例如使div的高度更高，或者还有其他最佳实践？
body {
margin:0;
}
.container {
display:flex;
flex-wrap:wrap;
height:100vh;
background-color: white;
}
.container > div {
min-height: 100vh;
border: 1px solid black;
box-sizing:border-box;
background-color: inherit;
}
.container > div .content{
height: 100vh;
width: 100vw;
background-color: inherit;
}
.half-width {
width:50%;
}
.half-width > .half-width-content{
position: relative;
margin-top: 0;
height: 100%;
width: 100%;
}
.half-width > .half-width-content > .instagram-slideshow{
position: relative;
height: 100%;
width: 100%;
}
.half-width > .half-width-content > .instagram-slideshow > img{
position: absolute;
width: 60%;
height: 60%;
left: 50%;
top:50%;
visibility: visible;
text-align: center;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.half-width > .half-width-content > .half-width-text {
position: absolute;
left: 50%;
top: 50%;
visibility: visible;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.half-width > .half-width-content > h1{
position: relative;
top: 15%;
text-align: center;
}<div class="container">
<div class="half-width" id="section2">
<div class="half-width-content">
<h1>Headline</h1>
<div class="half-width-text">
<div class="text-content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</p>
<p>
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</div>
</div>
<div class="half-width">
<div class="half-width-content">
<div class="instagram-slideshow" id="1">
<img class="slide" src="http://placekitten.com/200/300">
</div>
</div>
</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-19 07:27:13
你为什么要用绝对的？这不是你想要的吗？
.container {
display: flex;
align-items: stretch;
justify-content: center;
min-height: 100vh;
}
.item {
flex: 0 0 50%;
border: 1px solid #ccc;
padding: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
h2 {
text-align: center;
}<div class="container">
<div class="item">
<div>
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex vel quos at suscipit, asperiores nemo possimus magnam eligendi ipsam odit qui cumque, nesciunt. Nesciunt debitis aliquam perferendis eos officia in. Esse ex, sint, atque earum possimus accusantium
repellendus error commodi. Officia accusamus, magnam ab molestiae doloribus hic non! Sed molestiae atque, quaerat. Magnam deleniti impedit accusantium in rem, recusandae tenetur! Facilis cupiditate doloribus saepe deserunt fugiat aspernatur officia
rerum id est tenetur suscipit ratione eaque, necessitatibus, exercitationem quos repellendus quasi a mollitia provident accusantium repellat optio ipsa. Nulla, dolorum, fugit. Perferendis facere, voluptatem praesentium ipsum nulla qui molestiae
nostrum ex blanditiis error adipisci autem aspernatur quae, optio minus itaque. Doloremque magnam, laboriosam! Consequatur odio, neque voluptates laudantium ratione aliquam ullam. Nobis cumque enim, reiciendis, optio, at repellat quis nesciunt fugiat
numquam neque quae voluptas excepturi, repellendus in earum. Nobis corporis porro, placeat id doloribus voluptates esse eaque possimus quibusdam repellat. Perferendis natus tenetur recusandae illo, ea laboriosam similique culpa nulla, ducim</p>
</div>
</div>
<div class="item">
<img class="slide" src="http://placekitten.com/200/300">
</div>
</div>
Stack Overflow用户
发布于 2018-09-19 07:12:25
替换此css
.half-width>.half-width-content>.half-width-text {
position: absolute;
left: 50%;
top: 50%;
visibility: visible;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: calc(15% + 70px);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52400035
复制相关文章
相似问题
腾讯云开发者
