JSFiddle

Question

我有一个名为welcome-inputs的div，另外两个left和right

名为left的div需要位于左侧welcome-inputs，而right的div位于welcome-inputs的右侧。

左右宽度= 100px

需要一条位于两者中间的线，表示分离。

查看代码：http://jsfiddle.net/gn1asdmh/3/

红线必须位于图像的中间（图像代表左右）

Answer 1

<强> jsFiddle demo

在span和.left

之间添加.right元素

<span class="middleLine"></span>

CSS：

.welcome-inputs {
    float: none;
    margin: 0 auto;
    width: 80%;
    background:white;
    height:100px;
    text-align:center; /* ADD THIS */
}
.welcomeforms {
    color: #6B6B6B;
    margin: 0 auto;
    width: 100px !important;
}
.left {
    float: left;
    /*border-right: 3px solid red; REMOVE THIS */
}
.right {
    float: right;
}
body {
    background:blue;
}

span.middleLine{
   display:inline-block;
   border-right: 2px solid red;
   margin-left:-1px; /* cause the border is 2px */
    height:100%;
}

Answer 2

JSFiddle

另一种解决方法。

.left {
  position:absolute;
  top: 0;
  left: 0;
}

 .right {
  position:absolute;
  top: 0;
  right: 0;
}

Answer 3

如果您将position: relative添加到.welcome-inputs，则可以使用::after或::before上的.left或.right伪元素：

.left::after {
    border-right: 3px solid red;
    content: "";
    height: 100px;
    position: absolute;
    top: 0;
    left: calc((100% - 3px) / 2); // or use '50%' for better compatibility, but less exactness
}

并摆脱border-right

上的.left

JSFiddle Here

Answer 4

只需在父元素上使用生成的内容即可。给定示例中没有理由为此使用结构化标记。

更新了小提琴，http://jsfiddle.net/gn1asdmh/26/

.welcome-inputs {
    float: none;
    margin: 0 auto;
    width: 80%;
    background:white;
    height:100px;
    position: relative;
}
.welcome-inputs::before {
    content: '';
    display: block;
    position: absolute;
    outline: 1px solid red;
    left: 50%;
    width: 0;
    height: 100px;
}

.welcomeforms {
    color: #6B6B6B;
    margin: 0 auto;
    width: 100px !important;
}


.left {
float: left;
}

.right {
    float: right;
}

body {
    background:blue;
}

Answer 5

最简单的方法是使用HTML表格。这将使其保持响应。尝试类似下面的代码。

.welcome-inputs {
  width: 100%;
}
#leftInput,
#rightInput {
  width: 100px;
}
#separatorInput {
  text-align: center;
}
#dividingLine {
  display: inline-block;
  height: 100%;
  width: 5px;
  background: red;
  }

<table class="welcome-inputs">
  <tr>
    <td id="leftInput">
      <img width="100%" src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" />
    </td>
    <td id="separatorInput"><div id="dividingLine"</td>
    <td id="rightInput">
      <img width="100%" src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" />
    </td>
  </tr>
</table>

Answer 6

更好：不需要使用任何空/虚拟元素。我们依赖于使用伪元素。在这种情况下，我将使用::before：

.welcome-inputs {
    float: none;
    margin: 0 auto;
    width: 80%;
    background:white;
    height:100px;
    position: relative; /* new property added to original one */
}
.welcome-inputs::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: red;
    left: 50%;
    transform: translateX(-50%);
}

请记住在父元素上声明position: relative。请参阅此处的小提琴：http://jsfiddle.net/teddyrised/gn1asdmh/28/

p / s：您可能希望将transform的供应商前缀用于最大化跨浏览器兼容性。

Answer 7

为这些答案添加一些想法，你可能会想到：box-sizing，calc()，或者甚至是简单的background image/repeat/sizing

div之间的中心垂直线

7 个答案:

JSFiddle