Div碰撞和高度：自动

Question

标题可能措辞得更好（新手抱歉），但无论如何，我有一个内部有更多div的div，但是高度自动并没有按照意图工作，只是让它的高度等于其中一个div。现在框的高度设置为自动，但它只是将自己设置为图像的高度，而忽略文本和标题（隐藏在图像后面的标题）。制作它的任何帮助所以盒子包裹着它里面的所有东西，而不只是图像？

＆＃13;

＆＃13;

.box {
  width: 85%;
  background-color: white;
  height: auto;
  box-shadow: 0px 2px 5px 0px #737373;
  position: relative;
  max-width: 1000px;
  transform: translateX(-50%);
  left: 50%
}

.image {
  width: 90%;
  height: 200px;
  background-color: #f1f1f0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  top: 15%;
}

.text {
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid black;
  height: auto;
  position: absolute;
  top: 50%;
}

.title {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
  top: 5%;
}

＆＃13;

<div class="box">
  <div class="title">
    <h4>title</h4>
  </div>
  <div class="image"></div>
  <div class="text">
    <p>
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用position: relative;而不是绝对。因为position: absolute;从文档流中删除，因此忽略其他元素并被其他元素忽略（高度，宽度等）。

  

位置：绝对;

     

绝对定位是从页面上的元素流中删除这些元素。具有此类定位的元素不受其他元素的影响，并且不会影响其他元素。每次使用绝对定位时都要考虑这一点。

     

参考：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

.box {
  width: 85%;
  background-color: white;
  height: auto;
  box-shadow: 0px 2px 5px 0px #737373;
  position: relative;
  max-width: 1000px;
  transform: translateX(-50%);
  left: 50%
}

.image {
  width: 90%;
  height: 200px;
  background-color: #f1f1f0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  top: 15%;
}

.text {
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid black;
  height: auto;
  position: relative;
  top: 50%;
}

.title {
  transform: translateX(-50%);
  left: 50%;
  position: relative;
  top: 5%;
}

<div class="box">
  <div class="title">
    <h4>title</h4>
  </div>
  <div class="image"></div>
  <div class="text">
    <p>
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
  </div>
</div>