html div四个部分垂直交叉

Question

我被困在创造一个设计.. 我想在四条交叉垂直线上划分div，但我不能将它分成四部分。 请检查附件 我想要一个这样的设计..但我能够只分两部分div。 请帮帮我...

<div class ="row">
<div class="col-md-3">
<div class="col-md-3">
<div class="col-md-3">
<div class="col-md-3"><div>

我试试这个，但它给了我4个直的垂直列

谢谢

Answer 1

我不知道你的问题是什么，你需要提供更多信息：我为你做了这个，这有一些信息可以实现你的目标（我认为），这只是一个丑陋的例子

.wrapper {
  position: relative;
  width: 700px;
  height: 300px;
  background-color: #eee;
  overflow: hidden;
}

.wrapper > span {
  padding: 35px;
  margin: 35px;
  width: 100px;
  height: 160px;
  position: absolute;
  background-color: white;
  box-shadow: 10px 10px 5px #888888;
    font-size: 8px;
}

.info {
  box-sizing: border-box;
  width: 200px;
  height: 300px;
  position: absolute;
  border-radius: 50px 0px 0px 0px / 290px 0px 0px 0px;
  border-left: 2px #00ff00 solid;
  text-align: center;
  padding: 250px 50px 0 0;
  text-shadow: 2px 1px black;
  font-size: 14px;
  color: #fff;
}

div.info:nth-last-child(3) {
  background: url(http://lorempixel.com/200/300/nightlife/);
  right: 250px;
}

.info:nth-last-child(2) {
  background: url(http://lorempixel.com/200/300/nature/);
  right: 100px;
}

.info:nth-last-child(1) {
  background: url(http://lorempixel.com/200/300/fashion/);
  right: -50px;
}

<div class="wrapper">
  <span>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic lif</span>
  <div class="info">Nightlife</div>
  <div class="info">Nature</div>
  <div class="info">Fashion</div>
</div>