如何在容器外部和内部显示内联div？

Question

如何显示1000%这样的内容？ （红线是容器）

我尝试将灰色容器放大-950%（示例div）然后将其移至<div class="container"> <div id="contacts" class="gmlogic-target"> <div class="contacts-wrap"> <div class="contacts-left"> <div class="contacts-text"> <div class="contacts-text-wrap-left"> <h3>Get in touch</h3> <div> <span>Email</span> <span></span> </div> <div> <span>Our address</span> <span></span> </div> <div> <span>Mobile phone</span> <span></span> </div> <div> <span>Call between</span> <span></span> </div> </div> </div> </div> <div class="contacts-social"> <a href="http://www.facebook.com"><img alt="facebook" src=""></a> <a href="http://www.facebook.com"><img alt="facebook" src=""></a> </div> <div class="contacts-right"> <div class="contacts-text"> <div class="contacts-text-wrap-right"> <div> <span>Company name</span> <span></span> </div> <div> <span>Company code</span> <span></span> </div> <div> <span>VAT code</span> <span></span> </div> <div> <span>Address</span> <span></span> </div> <div> <span>Phone</span> <span></span> </div> <div> <span>Email</span> <span></span> </div> </div> </div> </div> </div> </div> 左侧，但在此之后我无法显示{{1}} s内联。

也许有人有想法我怎么能这样做？

{{1}}

Fiddle

Answer 1

您可以使用flexbox + position和calc()使用视口单元vw和%

来实现此目的

＆＃13;

＆＃13;

.container {
  width: 90%; /* changed for demo */
  margin: 0 auto;
  border: red solid 1px
}
.contacts-wrap {
  min-height: 172px;
  padding: 100px 0;
  display: flex
}
.contacts-left,
.contacts-right {
  position: relative;
  background: #ccc;
  width:50%
}
.contacts-left {
  left: calc(-50vw + 50%)
}
.contacts-right {
  right: calc(-50vw + 50%)
}

＆＃13;

<div class="container">
  <div id="contacts" class="gmlogic-target">
    <div class="contacts-wrap">
      <div class="contacts-left">
        <div class="contacts-text">
          <div class="contacts-text-wrap-left">
            <h3>Get in touch</h3>
            <div>
              <span>Email</span>
              <span></span>
            </div>
            <div>
              <span>Our address</span>
              <span></span>
            </div>
            <div>
              <span>Mobile phone</span>
              <span></span>
            </div>
            <div>
              <span>Call between</span>
              <span></span>
            </div>
          </div>
        </div>
      </div>
      <div class="contacts-social">
        <a href="http://www.facebook.com">
          <img alt="facebook" src="">
        </a>
        <a href="http://www.facebook.com">
          <img alt="facebook" src="">
        </a>
      </div>
      <div class="contacts-right">
        <div class="contacts-text">
          <div class="contacts-text-wrap-right">
            <div>
              <span>Company name</span>
              <span></span>
            </div>
            <div>
              <span>Company code</span>
              <span></span>
            </div>
            <div>
              <span>VAT code</span>
              <span></span>
            </div>
            <div>
              <span>Address</span>
              <span></span>
            </div>
            <div>
              <span>Phone</span>
              <span></span>
            </div>
            <div>
              <span>Email</span>
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;