如何在div中浮动一个span？

7 浏览
0 Comments

如何在div中浮动一个span？

我正在尝试学习如何在没有Bootstrap帮助的情况下使用CSS。我有以下内容：（可以在这里查看：http://plnkr.co/edit/FTCft1YOfQ4xy7FKWEHE?p=preview）

  George
  $23.20
  Carl
  $4.81
  Steve
  $0.34

以及CSS...

.pull-left {
    float: left;
}
.pull-right {
    float: right;
}
.block {
    display: block; /* 因为是div，我不需要这个属性对吗？ */
    background-color: #87CEEB;
    width: 100%;
}

如果我使用Bootstrap，我可以通过将我的HTML放在一个container div中，并且不使用自定义的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元素：

  George
  $23.20

解决方案2：

通过thgaskel，向block类添加clear:both; overflow:auto;

解决方案3：

这个解决方案似乎在块之间创建了间距。通过将block类的display:block更改为display:inline-block

解决方案4：

向block类添加float:left

解决方案5：

在尝试中发现了这个。创建一个新的选择器：.block:after { content: ":" /* <--- 完全不明白为什么这个有效 */ }

解决方案6：

从阅读这个页面中发现了这个解决方案。.block:after { content:""; display: table; clear: both; }

我感到非常不知所措，不确定该选择哪一个。谢谢。

0

3 答案

0 Comments

问题出现的原因是因为子元素在浮动，所以需要将父元素也进行浮动来获得完整的宽度。解决方法是在.block类中添加float:left;属性。

代码如下：

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

添加上述代码后，您将会看到效果上的差异。

0
0 Comments

问题的原因是需要将span浮动在div中，但是没有正确清除浮动。解决方法是添加一个clear:both的div来清除浮动，或者直接将clear:both; overflow:auto;应用于.block类。

以下为整理后的文章：

你在处理这个问题的方法上很接近了，唯一需要做的就是在span上应用浮动后清除浮动。

查看一下在HTML/CSS中如何使用clear：http://www.w3schools.com/cssref/pr_class_clear.asp

你的HTML代码应该是这样的：



  
    
  
  
    

      George
      $23.20
      

    

    

      Carl
      $4.81
      

    

    

      Steve
      $0.34

你也可以直接在.block类上应用clear:both; overflow:auto;。

哇哦，这么多看起来都行得通的解决方案...我真的不知道每个解决方案的优缺点。

0
0 Comments

问题出现的原因是使用了display:block属性，导致span元素无法浮动在div中。解决方法是将display:block替换为display:inline-block，或者使用display:block和float:left的组合。

具体代码如下：

.block {
    display: inline-block;  //将display:block替换为display:inline-block
    background-color: #87CEEB;
    width: 100%;
}

如果希望消除间隙，可以使用display:block和float:left的组合：

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

此外，还可以参考以下链接了解如何解决inline-block元素之间的间隙问题：

- [Fighting the Space Between Inline Block Elements](http://css-tricks.com/fighting-the-space-between-inline-block-elements/)

- [display:inline-block extra margin](https://stackoverflow.com/questions/1833734)

如果以上方法解决了问题，可以参考[jsfiddle](http://jsfiddle.net/eJ2kY/)进行验证。但是需要注意，Bootstrap中的btn-block样式使用的是display:block属性。

至于应用这些CSS样式的优缺点，没有具体说明。唯一需要注意的是，这些样式不应该影响HTML中的其他样式。

0