(CSS) 顶部的高度拉伸：0 和底部的：0 伪元素？

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 伪元素？

(CSS) Height-Stretch with top: 0 and bottom: 0 with Pseudo-Element?

css

height

stretch

pseudo-element