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放在container div中而不是使用我的自定义类block来实现所需的效果，添加类btn和btn-block。

我想让名字在左边垂直对齐，价格在右边垂直对齐。我错过了什么？

类似：

George                                     $23.20
Carl                                        $4.81
Steve                                       $0.34

请不要像我说的那样提及表格，我可以使用bootstrap并在div.container中包含上面的html，然后使用button.btn.btn-block而不是我的div.block来实现目标同样的效果。感谢。

更新1：

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

解决方案＃1：

添加new div element：

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

Change display:inline-block到block。

解决方案＃4：

Add float:left到block班。

解决方案＃5：

发现了这一个，一边乱搞。创建一个新的选择器：

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

解决方案＃6：

从阅读this page发现了这个。

.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

Answer 2

你的方法很接近，你需要做的唯一事情就是在它被应用到跨度之后清除浮动。

了解clear在HTML / CSS中的工作原理：http://www.w3schools.com/cssref/pr_class_clear.asp

你的HTML看起来像这样：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

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

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

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


  </body>

</html>

Answer 3

将float:left;添加到.block类，因为它的子项是浮动的，这就是为什么你需要浮动其父div以获得全宽

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

如何在div中浮动跨度？

3 个答案: