Question

我正在尝试在容器div中放置两个div。我希望将<div><span><div>放在容器<div>的中间，但我很难使用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

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

这会将子元素均匀地分布在整个屏幕上并使很多其他设置变得多余BTW（请注意我删除了很多CSS）。

Answer 2

这是你正在寻找的吗？ flexbox是解决这个问题的简单方法。如果你想在屏幕的左侧或右侧，你可以认为它是合理的 - 内容：左; https://jsfiddle.net/59b3tdur/9/

表示如果那个分隔符不是内容但是用css创建会更好。它的好处一般是保持样式和html分开，你可以通过给一个div左边或右边框1px来做到这一点示例

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

Answer 3

这是接近它的一种方法。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

容器<div>中的<div> <span> <div>

3 个答案: