Question

我有以下HTML / CSS，其中将文本和标题放在div的中心。但是，如果高度变小，则文本内容会超出divs大小，并且标题会显示在文本中。
有没有办法解决这个问题，例如增大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>

Answer 1

为什么要使用绝对值？这不是你想要的吗？

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

Answer 2

替换此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);
}

HTML / CSS内容在div中与flex重叠

2 个答案: