容器内的<div><span><div> <div>

Question

我正试着把两个div放在容器div里面。我希望将<div><span><div>放在容器<div>的中间，但我在使用CSS时遇到了困难。

到目前为止，这就是我所拥有的：

https://jsfiddle.net/59b3tdur/ (这里包括CSS)

<div class="DualScorepoints">
   <div class="LEFT">
        <span id="SCORE1" title="VP PPS">
          <a href="javascript:void()" style="color:#FFC90E; text-decoration:none; overflow:hidden" >100%</a>
          </span>
    </div>

     <span id ="Divider"> | </span>

   <div class="RIGHT">
      <span id="SCORE2" title ="DOM PPS">
          <a href="javascript:void()" style="color:#FFC90E; text-decoration:none; overflow:hidden" >80%</a>
       </span>
    </div>
</div>

Answer 1

这是接近它的一种方法。

​

.theContainer {
  width: 150px;
  height: 100px;
  background-color: #006699;
}

span {
  color: #FFD700;
  font-size: 30px;
}

.left {
  display: inline-block;
  float: left;
}

.right {
  display: inline-block;
  float: right;
}

#divider {
  color: white;
}

<font face="Source Sans Pro">

<div class="theContainer" align="center">
  <div class="left">
    <span> Left </span>
  </div>
  <span id="divider"> | </span>
  <div class="right">
    <span> Right </span>
  </div>
</div>

​

Answer 2

您可以使用display: flex;和justify-content: space-between;在.DualScorepoints上获得快速解决方案，请参阅https://jsfiddle.net/hyafgvo2/1/

这使得子元素均匀地分布在屏幕上，并使许多其他设置成为多余的BTW (注意，我删除了许多CSS)。

Answer 3

这就是你要找的吗？柔性盒是解决这一问题的简单方法。如果你想让它出现在屏幕的左边或右边，你可以让它对-内容:左；https://jsfiddle.net/59b3tdur/9/

 .scorePoints{
      display:flex;
      justify-content: center;
 }
 .DualScorepoints {
       display: flex;
       align-items: center;
 }

也就是说，如果这个分隔符不是内容，而是用css创建的，那就更好了。保持样式和html分开通常是好的，您可以通过给出一个div的左或右边框1 1px示例来做到这一点。

 .score1{
     border-right: 1px solid white;
 }

https://css-tricks.com/snippets/css/a-guide-to-flexbox/