div之间的中心垂直线

时间:2014-12-17 00:53:20

标签: javascript jquery html css

我有一个名为welcome-inputs的div,另外两个leftright

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

左右宽度= 100px

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

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

红线必须位于图像的中间(图像代表左右)

7 个答案:

答案 0 :(得分: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%;
}

答案 1 :(得分:0)

JSFiddle

另一种解决方法。

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

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

答案 2 :(得分:0)

如果您将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

答案 3 :(得分:0)

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

更新了小提琴,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;
}

答案 4 :(得分:0)

最简单的方法是使用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>

答案 5 :(得分:0)

更好:不需要使用任何空/虚拟元素。我们依赖于使用伪元素。在这种情况下,我将使用::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的供应商前缀用于最大化跨浏览器兼容性。

答案 6 :(得分:0)

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