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>