Question

我在两个容器上使用float: left;和float: right;进行双列布局。为了在视觉上将它们分隔到容器中，我想通过父容器中的伪元素在它们之间绘制一条垂直线。

我的代码：

.twocol {
  position: relative;
}

.twocol.divided:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 2px dashed #000;
}

.leftcol {
  float: left;
  width: 50%;
  padding-right: 20px;
}

.rightcol {
  float: right;
  width: 50%;
  padding-left: 20px;
}

然后是html：

<div class="twocol divided">
  <div class="leftcol">...</div>
  <div class="rightcol">...</div>
</div>

对于top: 0;和bottom: 0;，伪元素应该从父.twocol的顶部到底部绘制一条线。但没有任何反应。

在.twocol内的其他html元素div.divider上使用伪元素的相同规则效果很好并绘制线条。这种技术对于伪元素是不可能的，还是我错过了什么？

这里有jsfiddle.net/tw1vp2dg，其中包含不起作用的伪作用和工作html元素示例。

Answer 1

您display: table选择器.twocol:before。

将display: block或与table不同的其他值添加到伪元素的样式或删除.twocol:before选择器。

Example

Answer 2

用你的clearfix技巧覆盖你的规则。删除它并在主容器上使用overflow:hidden。 http://jsfiddle.net/tw1vp2dg/1/

擦除这个：

.twocol:before,
.twocol:after {
  content: "";
  display: table;
}

并添加此

.twocol {
  overflow:hidden;
}

* {
  box-sizing: border-box;
}

body {
  padding: 5px;
}

.twocol {
  position: relative;
  margin-bottom: 45px;
  overflow:hidden;
}

.twocol.divided:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 2px dashed #000;
}

.leftcol {
  float: left;
  width: 50%;
  padding-right: 20px;
}

.rightcol {
  float: right;
  width: 50%;
  padding-left: 20px;
}

.divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 2px dashed #000;
}

h1 {
  font-size: 1.2em;
  text-align: center;
}

// Clearfixing .twocol
.twocol {
  zoom: 1;
}



.twocol:after {
  clear: both;
}

<h1>Example with Pseudo-Element</h1>
<div class="twocol divided">
  <div class="leftcol">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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. <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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 class="rightcol">
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <br>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer.
  </div>
</div>

<h1>Example with HTML-Element</h1>
<div class="twocol">
  <div class="divider"></div>
  <div class="leftcol">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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. <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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 class="rightcol">
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <br>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer.
  </div>
</div>

（CSS）高度 - 拉伸与顶部：0和底部：0与伪元素？

2 个答案: