Question

我现在正在制作一个主页，背景为彩色背景，背景图像为“我左右”。 div位于此部分的左半部分，内容信息位于同一部分的右侧。我为这些中的每一个制作了6个宽度的列，并且响应性很好。

我有一个徽标（.about-page-logo），我想直接放在页面中间，两列相遇的地方的接缝处，还有一些我要放在顶部的文字页面（.about-page-title），也在2列相遇的地方。页面向下箭头也需要穿过中间缝（.page-down-arrow）。我该怎么做呢？

<section id="about">    

  <div class="container-fluid">

    <div class="about-page-title">
      Anything that is seemingly impossible interests me.
    </div>

    <div class="about-page-logo">
      logo
    </div>

    <div class="page-down-arrow">
    </div>

    <div class="row">
      <div class="about-left col-lg-6">
      </div>

      <div class="about-content col-lg-6">
        <div class="about-content-title">
          <h1>I'M JAY.</h1>
        </div>

        <div class="about-content-info">
          <p>Loren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsum
          <br /><br />

          Loren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsum
          </p>
        </div>

        <div class="about-personal-info">
          <h4>Email:</h4>
          <h4>LinkedIn:</h4>
          <h4>GitHub:</h4>
          <h4>Angel List:</h4>
        </div>

      </div>
    </div>
  </div>
</section>

Answer 1

看看我做的这个简单的原始例子，我希望这可以给你一个想法。

HTML标记

int r = RX.read() & 0xFF
int read = -(255 - r) if r > 128 else r

CSS

<div class="wrapper">
    <div class="logo">LOGO</div>
    <div class="left">
        THIS IS LEFT
    </div>
    <div class="right">
        THIS IS RIGHT
    </div>
</div>

JSFIDDLE

如何重叠2个不同列中间的元素？

1 个答案: