问题描述:

I would like to achieve side by side, same height divs (without using table layout) and a single vertical line between them. I tried with flex container per row, but is unplesent to have the vertical line in many pieces...What can be the best solution for this problem?

I would like to have something like in the image bellow:

A sumary of what I tried:

<!DOCTYPE html>

<html lang="en">

<head>

<title>test</title>

<style type="text/css">

.flex-container{display: -webkit-flex; /* Safari */display: flex; /* Standard syntax */

}

.flex-container .column{

background: #dbdfe5;

width: 100px;

}

.vr {background: red;

width: 2px;

margin: 0px 5px 0px 5px;

}

</style>

</head>

<body>

<div class="flex-container">

<div class="column">R1 - Col1</div>

<div class="vr"></div>

<div class="column bg-alt">R1 - Col2</div>

</div>

<div class="flex-container">

<div class="column">R2 - Col1</div>

<div class="vr"></div>

<div class="column bg-alt">R1 - Col2</div>

</div>

</body>

</html>

网友答案:

Solution with flexible height

using a wrapper to achieve the divider without interruption.

.col-item {
  width: 49%;
  margin-right: 2%;
  margin-bottom: 15px;
  border: 1px solid blue;
  padding: 5px;
  box-sizing: border-box;
}

.col-item:nth-child(2n) {
  margin-right: 0;
  padding-right: 0;
}

.col-item:nth-last-child(2),
.col-item:last-child {
  margin-bottom: 0;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.wrapper:after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  height: 100%;
  border-right: 1px solid red;
}
<div class="wrapper">
  <div class="col-item">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
  <div class="col-item">
    At vero eos et accusam et justo duo dolores et ea rebum.
  </div>
  <div class="col-item">
    Lorem ipsum dolor sit amet!
  </div>
  <div class="col-item">
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>
网友答案:

Make a container for two column children, float those children to they are next to each other. Make a pseudo element and position it absolutely to make the line that separates the columns.

main{
  height:500px;
  box-sizing:border-box;
}

main > *{
  float:left;
  width:46%;
  margin:2%;
  border:1px solid;
  height:100%;
  box-sizing:border-box;
  position:relative;
}

main > :last-child:before{
  content:"";
  height:100%;
  position:absolute;
  left:-4%;
  margin-left:-3px;
  top:0;
  border:1px solid;
}
<main>
  <div></div>
  <div></div>
</main>
网友答案:

Similar to @fauxserious's answer, but you don't need to worry about multiple children in the column's because you add the pseudo selector to the parent container:

main {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

main>* {
  flex: 0 1 auto;
  float: left;
  width: calc(50% - 40px);
  margin: 20px;
  border: 1px solid;
  height: 200px;
  box-sizing: border-box;
}

main:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 20px; /* Same as margin */
  bottom: 20px; /* Same as margin */
  border-left: 1px solid #ff6600;
}
<main>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</main>
网友答案:

Like that ? :

header, section, .sub_section, footer {
  float:left;
  width: 40%;
  border: 3px solid #000;
  margin-left: 6%;
}
header {
  height: 20vh;
}
section {
  height: 40vh;
  margin-top: 2%;
}
.sub_section {
  height: 20vh;
  margin-top: 2%;
}
footer {
  height: 20vh;
  margin-top: 2%;
}
<header></header>
<header></header>
<section></section>
<section></section>
<div class="sub_section"></div>
<div class="sub_section"></div>
<footer></footer>
<footer></footer>
网友答案:

I did create an example aswell.

Maybe you like it.

.content-left {
  width: 40%;
  height: 500px;
  border-right: solid 2px red;
  display: inline-block;
}

.content-right {
  width: 40%;
  height 500px;
  display: inline-block;
}
.content {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: lightblue;
}
.left1 {
  height: 190px;
}

.left2 {
  height: 90px;
}

.left3 {
  height: 190px;
}

.right1 {
  height: 190px;
}

.right2 {
  height: 90px;
}

.right3 {
  height: 90px;
}

.right4 {
  height: 90px;
}
<div class="content-left">
  <div class="content left1"></div>
  <div class="content left2"></div>
  <div class="content left3"></div>
</div>
<div class="content-right">
  <div class="content right1"></div>
  <div class="content right2"></div>
  <div class="content right3"></div>
  <div class="content right4"></div>
</div>
相关阅读:
Top