使文本和右浮动div显示在其灵活容器内的一行上 - 没有更多HTML

时间:2012-04-09 17:54:55

标签: css css-float clear

仅使用CSS,我试图强制右浮动元素不清除其左对齐的兄弟文本而不给父容器一个宽度。父级是块级别,但是浮动。基本上,容器需要始终是可能适合文本节点和<div>在一行上的最小宽度,并且它们需要在一行上实际呈现

例如,此处右浮动div将始终跳转到文本节点下方的行:

#demo {float:left;border:solid 1px blue;}       
#demo div {float:right;border:solid 1px green;}   

<div id="demo">
  Text Node!
  <div>right-floated</div>
</div>

最大的限制是我根本无法更改HTML - 我无法在文本节点周围添加<span>标记,并且我无法切换顺序以便文本节点到来第二。切换订单可以解决问题。

另一件事是我不想为包含元素指定宽度,因为内容宽度会有很大差异。使用CSS可能无法做到这一点,但我只是想知道是否有人有一个绝妙的技巧。

0 个答案:

没有答案