Question

已经找到了这个问题的几个答案，但是他们要么我要更改我的HTML，要么就是不能在我的案例中工作。

我有以下html：

<div class="name">Daiel</div>
<div class="amount">30€</div>
<!-- clear here -->
<div class="graph">
 <div class="green" style="width: 42%"></div>
</div>

以下css：

div.name{float:left;}
div.amount{float:right; }
div.amount:after { content: " "; display: table; clear: both; }
div.graph { height: 26px; width: 100%; background: #d9d9d9;}
div.graph .green { height: 25px; background: #a2af00;}

我无法让条形图低于文本。基本上我想要.amount自动清除我的花车，所以我猜我需要一个：之后。

请参阅jsfiddle.net/qQaQg/13/

我做错了什么？

谢谢！

Answer 1

你真的想用漂浮物吗？

为什么不使用它呢？相同的HTML标记，只是css，

div.graph { height: 26px; width: 100%; background: #d9d9d9;}
div.graph .green { height: 25px; background: #a2af00;}

.name, .amount{ display: inline-block; vertical-align: top; width: 49%; }
.name{ text-align; left; }
.amount{ text-align: right; }

Answer 2

添加课程＆＃34; clearfix＆＃34;在图div ..

<强> Working Fiddle here

<强> CSS：

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}

.clearfix {
    display: inline-block;
 }

祝你好运......

使用CSS3清除浮动而不更改HTML

2 个答案: