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%;
}

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

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

此外，我希望白线始终与图片下方的文字一样长。因此，不同页面的长度可能不同。这也可以使用CSS吗？

非常感谢

Answer 1

这样的东西？

编辑：如果您希望线条比文字更高且稍长，则需要更改某些值，例如：

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

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

<强>样本

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

如果该行总是在左侧并从顶部开始100px，为什么不使用固定位置;

#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
}

这是我从问题中理解的，如果我错了，你可以告诉......

了解定位：http://www.w3schools.com/cssref/pr_class_position.asp

将一个div放在另一个具有一定长度的div上

2 个答案: