Question

我想并排，相同的高度div（不使用表格布局）和它们之间的单个垂直线。我尝试了每行使用Flex容器，但是在多个部分中使用垂直线是不正常的......对于这个问题，什么是最佳解决方案？
我想在下面的图像中有类似的东西：

我尝试过的一件事：

＆＃13;

<!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>

＆＃13;

注意：行数为N且列内容为动态，行的高度应由该行中包含大量内容的列决定。（不允许使用JavaScript！）
谢谢！

Answer 1

高度灵活的解决方案

使用包装器不间断地实现分隔符。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

为两个列子项创建一个容器，将这些子项浮动到它们彼此相邻的位置。创建一个伪元素并将其绝对定位以生成分隔列的行。

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>

Answer 3

与@ fauxserious的回答相似，但您不需要担心列中的多个子项，因为您将伪选择器添加到父容器中：

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>

Answer 4

那样的？：

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>

Answer 5

我确实创造了一个例子。

也许你喜欢它。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 6

在两个容器之间创建一条垂直线并保持从上到下的直线的最简单方法

.table_container.row{
       /* border: 0.5px solid #333;*/
        margin-top: -1px;
        display: flex;
     
    }
    .table_container .left_col{
       border-right:3px solid red;
    }

 <div class="row table_container">
          <div class="col-md-4 left_col">Lorem</div>
          <div class="col-md-8 right_col">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
 </div>

它们并排划分，它们之间具有相同的高度和垂直线

6 个答案:

高度灵活的解决方案