html - CSS 和 HTML 在图像上放置偏移内容以产生交错效果

Question

我目前为我的网站提供了一个“工作”布局，该布局具有我非常喜欢的风格，其中我有一个内容偏移和覆盖图像。这几乎是我想要的位置 - 目前图像都完美居中，每个备用文本框都与右侧或左侧重叠，如下所示：

但是，我想这样做，以便每个交替行都将图像拉到左侧或右侧，并且文本框仍然在另一侧重叠，如下所示：

我在这里有点不知所措，实现这一目标的最佳方法是什么？

笔： https ://codepen.io/anon/pen/XLeGNN

.image-block-container {
  font-family: Arial;
}

.image-block-container img {
  display: block;
  margin:0 auto;
  width: 100%;
}

.text-block-right {
  position:relative;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 0px 12px 4px;
  line-height: 28px;
  font-weight: 100;
  text-align: left;
  background: rgb(255, 255, 255);
  color: black;
  padding:20px;
  bottom: 35%;
  max-width: 300px;
  margin-top: -120px !important;
  word-wrap:break-word;
  margin:0 auto;
  line-height:35px;
}

.text-block-left {
  position:relative;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 0px 12px 4px;
  line-height: 28px;
  font-weight: 100;
  text-align: left;
  background: rgb(255, 255, 255);
  color: black;
  padding:20px;
  bottom: 35%;
  max-width: 300px;
  margin-top: -120px !important;
  word-wrap:break-word;
  margin:0 auto;
  line-height:35px;
}


@media (min-width: 768px){
    
  .image-block-container {
    position: relative;
  }
  
  .image-block-container img {
    width: 65%;
    margin:0 auto;
  }
  
  .text-block-right {
    position: absolute;
    bottom: 20%;
    right: 5%;
    max-width:550px;
  }

  .text-block-left {
    position: absolute;
    bottom: 20%;
    left: 5%;
    max-width:550px;
  }
}

<div class="image-block-container">
    <img src="http://via.placeholder.com/1280x900" alt="about_us" />
    <div class="text-block-right">
        <h1>About Us</h1>
        We are building a first of a kind network of doctors who offer Direct Primary Care and Anti-Aging (Cosmetic
        Dermatology) medical memberships for patients who want optimum healthcare driven by the latest in technology and
        -- we offer a concierge service (management and patient referral service) for doctors that specializes in
        converting "insurance" practices to the "membership" model.
    </div>
</div>

<div class="image-block-container">
    <img src="http://via.placeholder.com/1280x900" alt="about_us" />
    <div class="text-block-left">
        <h1>About Us</h1>
        We are building a first of a kind network of doctors who offer Direct Primary Care and Anti-Aging (Cosmetic
        Dermatology) medical memberships for patients who want optimum healthcare driven by the latest in technology and
        -- we offer a concierge service (management and patient referral service) for doctors that specializes in
        converting "insurance" practices to the "membership" model.
    </div>
</div>

标签： htmlcss

Answer 1

一种方法是在元素上使用弹性框。.image-block-container这使得元素的行对齐更简单，更健壮，垂直居中（即 via align-items:center）。

text-block通过以这种方式使用 flex-box，您可以通过 CSS 转换来实现重叠。在下面的代码片段中，我沿 x 轴平移text-blockby以使文本块位于图像边缘的中心。50%

最后，left-overlap引入了“修饰符”CSS 类来修改元素布局的顺序.image-block-container——这使得text-block弹性盒元素的放置和顺序可以根据left-overlap情况进行调整：

.image-block-container {
  font-family: Arial;
  margin-bottom: 1rem;
  /* Use flex box with row orrientation */
  display: flex;
  flex-direction: row;
  /* Vertically center children */
  align-items: center;
}

.text-block {
  /* Cause text block to tranlate by half width to
  overlap the image */
  transform: translateX(-50%);
  max-width: 25rem;
  background: pink;
  padding: 1rem;
}

.left-overlap img {
  /* If left overlap case, then change the ordering
  of the img to set it after the adjacent text block */
  order: 1;
}

.left-overlap .text-block {
  /* Translate text block in opposite direction for
  left overlap case */
  transform: translateX(50%);
}


/* Mobile */

@media (max-width: 768px) {
  .image-block-container {
    flex-direction: column;
  }
  .text-block {
    width:75%;
  }
  .left-overlap img {
    order: 0;
  }
  .left-overlap .text-block, .text-block {
    transform: translateY(-50%);
  }
}

<div class="image-block-container right-overlap">
  <img src="http://via.placeholder.com/1280x500" alt="about_us" />
  <div class="text-block">
    <h1>About Us</h1>
    We are building a first of a kind network of doctors who offer Direct Primary Care and Anti-Aging (Cosmetic Dermatology) medical memberships for patients who want optimum healthcare driven by the latest in technology and -- we offer a concierge service
    (management and patient referral service) for doctors that specializes in converting "insurance" practices to the "membership" model.
  </div>
</div>


<div class="image-block-container left-overlap">
  <img src="http://via.placeholder.com/1280x500" alt="about_us" />
  <div class="text-block">
    <h1>About Us</h1>
    We are building a first of a kind network of doctors who offer Direct Primary Care and Anti-Aging (Cosmetic Dermatology) medical memberships for patients who want optimum healthcare driven by the latest in technology and -- we offer a concierge service
    (management and patient referral service) for doctors that specializes in converting "insurance" practices to the "membership" model.
  </div>
</div>

希望这个对你有帮助！