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;权利因为使用浮动广告，您的<p>内容将不再保留在head-wrap内。我刚刚在this演示中添加了header-wrap边框，以显示哪些内容将保留在代码中的标记内。

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

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

还请阅读this关于CSS-Tricks的CSS-float的精彩文章，了解它是如何运作的。

Answer 2

喜欢这个

<强> demo

<强> CSS

.header-wrap{
    margin:0 auto;
    width:200px;
    text-align:right;
}
h2.header-wrap{
    margin:0;
    padding:0;

}
.header-wrap p{

    text-align:right;
    float:right;
    margin:0;
    padding:0;
}

Answer 3

只是这个

.header-wrap{
    margin:0 auto;
    width:200px;
    text-align:right;
}

Demo Fiddle

Answer 4

试试这个：

.header-wrap{

width:auto;

display:inline-block;
}

对齐并设计动态用户生成的内容布局

4 个答案: