Question

我想在两个div之间建立一条垂直线。我知道水平线有hr但垂直线没有。{反正有没有使用border吗？

<style>
#wrapper_1 {
    background-color:pink;
    height:100px;
    float:left;
    width: 100px;
}

#wrapper_2 {
    background-color:brown;
    height:100px;
    width: 100px;
    float:right;
}
</style>

<div id="wrapper_1">
    Creating slideshows PHP
</div> 

<div id="wrapper_2">
    Creating slideshows with WordPress 
</div>

Answer 1

您还可以使用伪元素制作垂直分隔符。您不需要额外的div来制作分隔符，只需使用伪元素并根据您的需要进行样式设置。

＆＃13;

#wrapper_1 {
  background-color: pink;
  height: 100px;
  float: left;
  width: 100px;
}
#wrapper_1:after {
  content: "";
  background-color: #000;
  position: absolute;
  width: 5px;
  height: 100px;
  top: 10px;
  left: 50%;
  display: block;
}
#wrapper_2 {
  background-color: brown;
  height: 100px;
  width: 100px;
  float: right;
}

＆＃13;

<div id="wrapper_1">
  Creating slideshows PHP
</div>

<div id="wrapper_2">
  Creating slideshows with WordPress
</div>

＆＃13;

PS：注意伪元素的绝对定位。感谢。

Answer 2

您可以使用<hr>，因为它在语义上是正确的，然后使用CSS将其转换为垂直线。

hr.vertical {
    height:100%; /* you might need some positioning for this to work, see other questions about 100% height */
    width:0;
    border:1px solid black;
}

Answer 3

在你的两个div之间创建一个新的div并添加这个类：

.vertical-row {
 Float:left;
 height:100px;
 width:1px; /* edit this if you want */
 background-color: your color
}

Answer 4

我不是css黑客，但这是我怎么做的..请注意你应该在浮动元素之后使用clear: both;。

<强> HTML ：

<div class="container">

  <div id="wrapper_1">
      Creating slideshows PHP
  </div> 

  <div class="seperator"></div>

  <div id="wrapper_2">
      Creating slideshows with WordPress 
  </div>

  <div class="clearfix"></div>

</div>

<强> CSS ：

#wrapper_1 {
    background-color:pink;
    height:100px;
    float:left;
    width: 100px;
}

#wrapper_2 {
    background-color:brown;
    height:100px;
    width: 100px;
    float:right;
}

.seperator {
  height: 100%;
  width: 1px;
  background: black;
  top: 0;
  bottom: 0;
  position: absolute;
  left: 50%;
}

.container {
  position: relative;
}

.clearfix {
  clear: both;
}

DEMO ：jsfiddle

Answer 5

确定你可以：

只需将元素包装到包装器中并进行一次显示：table-cell。

var o = {
    get current() {
        var self = this;
        return {
            set myVal(str) {
                self.log[self.log.length] = str;
            }
        }
    },
    log: []
};

o.current.myVal = 1234;
o.current.myVal = 5678;

document.write(o.log)

第二：创建另一个div宽度类＆＃34; vr＆＃34;你的两个包装器之间的风格如下：

.bigwrapper{
  display:table;
  width:100%;
}

最终演示：

https://plnkr.co/edit/uJsmrCaF9nns49J5RcYj?p=preview

Answer 6

如果您使用的是flex元素，并且由于display: flex;属性而使元素转换为列时遇到问题，请在元素上使用box-shadow属性，因为它不会累加容器空间。

如何在两个div之间添加垂直线

6 个答案: