html - 对齐和设计动态用户生成的内容布局

Question

http://jsfiddle.net/V2mGG/

<div class="header-wrap">
     <h2> title </h2>

    <p class="company-desc">description float right</p>
</div>

我想要这样的东西

Bachelor Degree in Product Design
                       at Harvard 

但是标题可长可短，是动态的，如何设计布局才不会断？

Answer 1

更改 float:right;至 text-align:right;对。
因为有了 float ，你的 <p>内容不会留在 head-wrap 内了。我刚刚添加了 this演示 header-wrap 的边框向您展示哪些内容将与您的代码一起保留在标签内。

这是我使用 text-align:right 的演示值并在包装器中添加了边框以向您展示，p-tag 将保留在包装器内:
Codepen Demo

使用此解决方案，您的标题将左对齐，而描述将保持在右侧。如果你想要两者都正确对齐，只需复制 text-align:right到包装器的 CSS 语句。

另请阅读 this CSS-Tricks 撰写的关于 CSS-float 的精彩文章，以了解它的真正工作原理。