如何将一个span标签浮动在一个div容器内？

Question

如何将一个span标签浮动在一个div容器内？

11

我正在尝试学习如何在没有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并将上面的HTML包装在div.container中，然后使用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 的建议，在 block 类中添加 clear:both; overflow:auto;。

解决方案 #3：

这个解决方案似乎会在块之间创建边距。

将 block 类的 display:block 更改为 display:inline-block，具体方法请参考此处。

解决方案 #4：

将 float:left 添加到 block 类中，具体方法请参考此处。

解决方案 #5：

在尝试中发现了这个解决方案。创建一个新的选择器：

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

解决方案 #6：

从这个页面��了解到了这个方案。

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

我感到有些不知所措，不确定该选择哪个。谢谢。

- JP Richardson

3个回答

3

您的方法接近正确，唯一需要做的是在应用到后清除浮动。

请参考HTML/CSS中clear的使用：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>

- JanR

1

你也可以将 clear:both; overflow:auto; 应用于 .block 类。 - thgaskell

天啊，有这么多看起来都能用的解决方案……我真的不知道每个方案的优缺点。 - JP Richardson

2

将.block类添加float:left;，因为它的子元素是浮动的，所以需要浮动其父div以获得完整的宽度。

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

- Hushme

添加标签后，您将看到差异.. :) - zzlalani

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Praveen · Accepted Answer

不要使用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%;
}

实际上，inline-block 倾向于留下空格，这可以通过多种方式来防止。

即使这样可以解决您的问题，请查看 jsfiddle