10

我正在尝试学习如何在没有 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代替 mydiv.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;
}

我感到非常不知所措，不知道该选哪个。谢谢。

4

3 回答 3

4

而不是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

于 2013-07-30T04:29:42.060 回答
3

您的方法很接近，要完成这项工作，您唯一需要做的就是在将浮动应用于跨度后清除浮动。

看看如何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>
于 2013-07-30T04:29:45.627 回答
2

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

.block {
    display: block; /* since, div, I don't need this right ?*/
    background-color: #87CEEB;
    width: 100%;
    float:left;
}
于 2013-07-30T04:33:10.263 回答