如何在div中浮动一个span？ [英] How to float a span in a div?

问题描述

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

 < div class =block> 
< span class =pull-left>乔治< / 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，我不需要这个权限？* / 
 background-color：＃87CEEB; 
 width：100％; 
} 
  

如果我使用Bootstrap，我可以实现所需的效果， html在容器 div中，而不是使用我的自定义类 block ，添加类 btn 和 btn-block 。

左边和价格在右边垂直对齐。

排序如下：

  George $ 23.20 
 Carl $ 4.81 
 Steve $ 0.34 
  

请不要提及表格，说，我可以使用引导和包装上面的html在 div.container ，然后使用 button.btn.btn-block 而不是我的 div.block 来实现完全相同的效果。非常感谢。

更新1：

可能是一两个解决方案，但有很多。有人能解释每个解决方案的利弊？

添加新的div元素：

 < div class =block> 
< span class =pull-left>乔治< / span> 
< span class =pull-right> $ 23.20< / span> 
< div style ='clear：both'>< / div> 
< / div> 
  

解决方案2：

添加 clear：both; overflow：auto; 到 thgaskel的块

解决方案3：

更改 c> c> c> c：> display：block p>



解决方案4：

c>类向块添加 float：left p>



解决方案5：

发现了这一个，创建新的选择器：

  .block：after {
 content：：/ *< ---完全损失为什么这样工作* / 
} 
  

解决方案6：

从此页面。

  .block：after {
 content： ; 
 display：table; 
 clear：both; 
} 
  

我感到很不知所措，不知道该选哪一个。感谢。

解决方案

而不是 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％; 
} 
  

Actaully inline-block往往会留下可以以多种方式防止的空间。

• 消除内嵌块元素之间的空间


• 显示inline-block extra margin

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

I'm trying to learn how to actually use CSS without the help of Bootstrap.

I have the following: (can be viewed here: 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>

and the 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%;
}

If I was using Bootstrap, I could achieve the desired effect, by putting my html in a container div and instead of using my custom class of block, add the class btn and btn-block.

I want to have the names align vertically on the left and the prices align vertically on the right. What am I missing?

Sort of like:

George                                     $23.20
Carl                                        $4.81
Steve                                       $0.34

Please don't mention tables, like I said, I could use bootstrap and wrap the above html in div.container, and then use button.btn.btn-block instead of my div.block to achieve the exact same effect. Thanks.

Update 1:

OK, I didn't expect there to be more than maybe one or two solutions, but there's quite a bit. Can someone explain the pros/cons of each solution? I'm really at a loss here.

Solution #1:

Add a 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>

Solution #2:

Add clear:both; overflow:auto; to the block class by thgaskel

Solution #3:

This one seems to create margins between the blocks.

Change display:block to display:inline-block for the block class.

Solution #4:

Add float:left to the block class.

Solution #5:

Discovered this one while messing around. Create a new selector:

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

Solution #6:

Discovered this one from reading this page.

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

I'm feeling pretty overwhelmed and am not sure which to pick. Thanks.

解决方案

Instead of display: block;, use the below css

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

Update: Since the gap is distrubing, better use

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

Actaully inline-block tends to leave space which can be prevented in many ways.

• Fighting the Space Between Inline Block Elements
• display inline-block extra margin

Even this solves your problem, check jsfiddle

这篇关于如何在div中浮动一个span？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！