如何在div中浮动跨度？

Question

我正在尝试学习如何在没有Bootstrap的帮助下实际使用CSS.

我有以下内容:(可以在这里查看:http://plnkr.co/edit/FTCft1YOfQ4xy7FKWEHE？p = preview)

<div class="block">
  <span class="pull-left">George</span>
  <span class="pull-right">$23.20</span>
</div>

<div class="block">
  <span class="pull-left">Carl</span>
  <span class="pull-right">$4.81</span>
</div>

<div class="block">
  <span class="pull-left">Steve</span>
  <span class="pull-right">$0.34</span>
</div>

和CSS ......

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.block {
    display: block; /* since, div, I don't need this right ?*/
    background-color: #87CEEB;
    width: 100%;
}

如果我使用Bootstrap,我可以通过将我的html放在containerdiv中而不是使用我的自定义类来实现所需的效果block,添加类btn和btn-block.

我想让名称在左边垂直对齐,价格在右边垂直对齐.我错过了什么？

有点像:

George                                     $23.20
Carl                                        $4.81
Steve                                       $0.34

请不要提及表,就像我说的,我可以使用bootstrap并将上面的html包装进去div.container,然后使用button.btn.btn-block而不是我div.block来实现完全相同的效果.谢谢.

更新1:

好吧,我没想到会有超过一两个解决方案,但还有很多.有人可以解释每个解决方案的优缺点吗？我真的很茫然.

解决方案#1:

添加一个新的div元素:

<div class="block">
  <span class="pull-left">George</span>
  <span class="pull-right">$23.20</span>
  <div style='clear:both'></div>
</div>

解决方案#2:

由thgaskel添加clear:both; overflow:auto;到block课堂

解决方案#3:

这个似乎在块之间创造了利润.

更改 display:block到display:inline-block的block类.

解决方案#4:

添加 float:left到block类.

解决方案#5:

搞乱了这一个.创建一个新的选择器:

.block:after {
  content: ":" /* <--- at a complete loss why this works */ 
}

解决方案#6:

通过阅读本页发现了这一个.

.block:after {
  content:"";
  display: table;
  clear: both;
}

我感觉非常不知所措,不知道该选哪个.谢谢.

Answer 1

而是display: block;使用下面的 css

.block {
display: inline-block;  //change like this
background-color: #87CEEB;
width: 100%;
}

更新： 由于差距令人不安，更好地利用

.block {
    display: block;
    float: left;
    background-color: #87CEEB;
    width: 100%;
}

实际上，内联块往往会留下空间，这可以通过多种方式来防止。

• 对抗内联块元素之间的空间
• 显示内联块额外边距

即使这也解决了你的问题，请检查jsfiddle