将一个div置于具有一定长度的另一个div上。

Question

我希望实现以下布局：

我有图像，应该是相邻的，在顶部。然后，我想要一条直线从左边的图片(x坐标)和接近顶部(y坐标)到接近底部。

我的设计已经取得了很大进展，但是当我改变窗口的大小时，它也会发生变化：https://jsfiddle.net/toekttbu/

HTML:

<div class="container">
  <img src="https://pixabay.com/static/uploads/photo/2013/09/17/20/22/seagull-183229_960_720.jpg" id="pic-1">

   <img src="https://pixabay.com/static/uploads/photo/2015/10/29/14/44/sunset-1012477_960_720.jpg" id="pic-2">

   <div id="white-line>
   </div>
</div>

CSS:

body {
  background-color: #000;
  margin: 0;
  padding: 0;
}

.container {
  height: 100px;
  width: 100%;
  position: relative;
}

#pic-1 {
  position: absolute;
  width: 35.35%;
  background-color: #f00;
}

#pic-2 {
  width: 64.65%;
  position: absolute;
  right: 0;
}

#white-line {
  width: 5px;
  position: absolute;
  height: 350%;
  background-color: #FFF;
  top: 100%;
  left: 7%;
}

我希望白线始终保持在海鸥的同一位置。我知道为什么它不能工作，因为白线是使用100 of的位置从容器的高度。

我需要用海鸥高度的百分比来定位它。这有可能只使用CSS吗？

另外，我希望白线总是和图片下面的文本一样长。因此，在不同的页面上，它可能有不同的长度。这也可以使用CSS吗？

非常感谢

Answer 1

像这样吗？

编辑：--如果您希望行更高、长度比文本稍长，则需要更改一些值，例如：

#pic-1,
#pic-2 {
  margin-top: -5%
}

p {
  padding: 20% 5% 20px 5%;
  margin-top: 5%;
}

演示

​

body {
  background-color: #000;
  margin: 0;
  padding: 0;
  color: #fff;
}

.container {
  height: 100px;
  width: 100%;
  position: relative;
}

#pic-1 {
  position: absolute;
  width: 35.35%;
  background-color: #f00;
  margin-top: -15%;
}

#pic-2 {
  width: 64.65%;
  position: absolute;
  right: 0;
  margin-top: -15%;
}

p {
  position: relative;
  padding: 10% 5% 0px 5%;
  margin-top: 15%;
  margin-left: 15px;
}

p:before {
  content: "";
  width: 5px;
  height: 100%;
  background-color: #fff;
  display: inline-block;
  position: absolute;
  bottom: 0;
  margin-left: -15px;
}

<div class="container">
  <img src="https://pixabay.com/static/uploads/photo/2013/09/17/20/22/seagull-183229_960_720.jpg" id="pic-1">
  <img src="https://pixabay.com/static/uploads/photo/2015/10/29/14/44/sunset-1012477_960_720.jpg" id="pic-2">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, nibh et vestibulum lobortis, erat mauris tempor tellus, ac condimentum massa tortor a ante. Ut ut eleifend purus. Quisque semper neque vulputate libero eleifend, a tincidunt diam aliquet.
    Proin vehicula, erat id hendrerit suscipit, ante justo iaculis mauris, a ullamcorper ipsum ligula eget sapien. Nulla lorem leo, ullamcorper at justo dapibus, bibendum maximus metus. Aliquam tempus ligula rhoncus, rutrum magna a, dictum nibh. Fusce
    accumsan neque egestas nibh lacinia tristique.
  </p>
</div>

​

Answer 2

如果线路总是在左边，从顶部开始从100 at开始，为什么不使用固定位置；

#white-line {
  width: 5px;
  position: fixed;
  height: 90%;//350% is 3.5 times the height of the parent. why ?
  background-color: #FFF;
  top: 100px;//is the picture always 100px tall ? play with the top position
  left: 30px;//no need to do with % because it should be at the same LEFT position
}

这就是我从问题中了解到的，如果我错了，你可以说.

了解定位：position.asp