我正在尝试学习如何在没有 Bootstrap 帮助的情况下实际使用 CSS。
我有以下内容:(可以在这里查看:http://plnkr.co/edit/FTCft1YOfQ4xy7FKWEHE?p=preview 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
and btn-block
.
我想让名称在左侧垂直对齐,价格在右侧垂直对齐。我缺少什么?
有点像:
George $23.20
Carl $4.81
Steve $0.34
请不要提及表格,就像我说的,我可以使用 bootstrap 并将上面的 html 包装在div.container
,然后使用button.btn.btn-block
而不是我的div.block
以达到完全相同的效果。谢谢。
更新1:
好吧,我没想到会有不止一两个解决方案,但确实有很多。有人可以解释每个解决方案的优点/缺点吗?我在这里真的很茫然。
解决方案#1:
Add a 新的 div 元素 https://stackoverflow.com/a/17938339/10333:
<div class="block">
<span class="pull-left">George</span>
<span class="pull-right">$23.20</span>
<div style='clear:both'></div>
</div>
解决方案#2:
Add clear:both; overflow:auto;
to the block
类由thgaskel https://stackoverflow.com/users/2129835/thgaskell
解决方案#3:
这似乎在块之间创建了边距。
Change https://stackoverflow.com/a/17938338/10333 display:block
to display:inline-block
为了block
class.
解决方案#4:
Add https://stackoverflow.com/a/17938377/10333 float:left
to the block
class.
解决方案#5:
闲逛的时候发现了这个。创建一个新的选择器:
.block:after {
content: ":" /* <--- at a complete loss why this works */
}
解决方案#6:
通过阅读发现了这个这一页 http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php.
.block:after {
content:"";
display: table;
clear: both;
}
我感到不知所措,不知道该选择哪个。谢谢。