Question

我正在尝试创建一个布局，其中元素（.figure）在比其容器（.timeline-content）更短（高度）时居中对齐。但是当元素长于容器时，我希望元素的高度与容器相同。

容器本身的高度取决于其父级。

This image should help clarify the desired behavior. 这就是我现在所拥有的，我不太明白为什么img延伸到它的父级，即使它的最大高度：100％

＆＃13;

html{
  position: relative;
}
.timeline-item{
  width: 100%;  
  overflow:hidden
}
.timeline-content{
  width: 50%;
  float: left;
  text-align: right;
}
.timeline-image{
  display:flex;
  align-items: center;
  position:absolute;
  right: 0;
  width: 50%;
  height:100%;
}
.figure{
  width:100%;
  max-height: 100%;
  margin: 0;
  position:relative;
}
img{
  max-height:100%;
  max-width:100%;
  float:left;
}

＆＃13;

<div class="timeline-item">
  <div class="timeline-content">
    <h3 class="timeline-title">Blah blah blah
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ornare sem. In sodales ac nisl facilisis pharetra. Nam non pellentesque mauris. Proin scelerisque, sapien non scelerisque auctor, nunc erat condimentum est, viverra dapibus dui odio a neque. Mauris est dui, posuere at urna in, gravida tincidunt odio. Integer quis egestas est. Praesent tincidunt justo nec nibh malesuada ullamcorper. Nulla convallis et quam vitae posuere.
      
    </p>
  </div>
  <div class="timeline-image">
    <figure class="figure">
      <img src="http://via.placeholder.com/550x900">
      <figcaption class="figure-caption">blah
      </figcaption>
    </figure>
  </div>
</div>

＆＃13;

Answer 1

在不知道您要使用标题this is the closest I've gotten完成什么的情况下。更新标题的信息，我会看到我还能做些什么。

＆＃13;

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.timeline-item{
  width: 100%;
  position:relative;
}
.timeline-leftbox{
  width:50%;
  text-align:right;
  padding:0 8px;
}

.timeline-rightbox{
  position:absolute;
  height:100%;
  width:50%;
  top:0;
  right:0;
  overflow:hidden;
  white-space:nowrap;
}
.timeline-rightbox::after{
  content:"";
  display:inline-block;
  height:100%;
  width:0;
  vertical-align:middle;
}
.timeline-rightbox img{
  max-height:100%;
  max-width:100%;
  width:auto;
  height:auto;
  vertical-align:middle;
}

＆＃13;

<div class="timeline-item">
  <div class="timeline-leftbox">
    <div>
      <h3 class="timeline-title">Blah blah blah</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ornare sem. In sodales ac nisl facilisis pharetra. Nam non pellentesque mauris. Proin scelerisque, sapien non scelerisque auctor, nunc erat condimentum est, viverra dapibus dui odio a neque. Mauris est dui, posuere at urna in, gravida tincidunt odio. Integer quis egestas est. Praesent tincidunt justo nec nibh malesuada ullamcorper. Nulla convallis et quam vitae posuere.
      </p>
    </div>
  </div>
  <div class="timeline-rightbox">
    <img src="http://via.placeholder.com/550x900" />
  </div>
</div>

＆＃13;

您可以使用calc css：

在图像下创建标题空间

https://jsfiddle.net/freer4/r08ujx5p/3/

当高度小于容器时，垂直中心元素，但当容器高度较小时，使高度为100％

1 个答案: