如何使用 css/html 以下列方式对齐文本？

Question

我刚刚在我的网站上添加了一个小区域，如下所示：

---

问题出在“关于我：”部分。我需要将文本移到那里看起来像这样：

---

任何人都可以建议 css / html 对齐解决方案，以像第二个示例中那样定位文本吗？

当前 HTML

 <div id="profInfo">
            <div id="profImage">
            <img src="..." alt="user: ..."/>
            </div>
            <div id="profDetails">
                <ul>
                    <li><b class="underb" style="color: #7da315;">Name</b><b style="color: #7da315;">:</b> Ilya Knaup </li>
                    <li><b class="underb" style="color: #1e8bb4;">Country</b><b style="color: #1e8bb4;">:</b> Spain </li>
                    <li><b class="underb" style="color: #c86c1f;">Stories</b><b style="color: #c86c1f;">:</b></li>
                    <li><b class="underb" style="color: #af1e83;">About me</b><b style="color: #af1e83;">:</b> Lorem ipsum dummy textum ...</li>
                </ul>
            </div>
            </div>

当前 CSS

* {
     margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
  }

#profInfo {
    width: 512px;
    margin: 10px 4px 0 3px;
}

#profImage {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    height: 100px;
    width: 100px;
    padding: 1px;
    float: left;
    background: #535353;
    border: 1px solid #272727;

    -khtml--webkit-box-shadow: 0 1px 2px #d6d6d6;
    -moz-box-shadow: 0 1px 2px #d6d6d6;
    box-shadow: 0 1px 2px #d6d6d6;
}

#profDetails {
    float: right;
    width: 395px;
    line-height: 22px;
}

#profDetails ul {
    list-style: none;
    font-size: 13px;
}

.underb {
    text-decoration: underline;
}

#profImage img {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

这里是所有代码http://jsfiddle.net/8ERvz/7/

Answer 1

听起来很疯狂，您可以使用table。

您有一组带有一组数据的标题。对我来说听起来像一张桌子。

Answer 2

更新 HTML

<div id="profInfo">
        <div id="profImage">
        <img src="..." alt="user: ..."/>
        </div>
        <div id="profDetails">
            <ul>
                <li><b class="underb" style="color: #7da315;">Name</b><b style="color: #7da315;">:</b> Ilya Knaup </li>
                <li><b class="underb" style="color: #1e8bb4;">Country</b><b style="color: #1e8bb4;">:</b> Spain </li>
                <li><b class="underb" style="color: #c86c1f;">Stories</b><b style="color: #c86c1f;">:</b></li>
                <li><div style="float:left; display:block;width:60px;"><b class="underb" style="color: #af1e83;">About me</b>: </div> <p style="display:block;width:300px;padding-left:60px;">Lorem ipsum dummy textum ... Lorem ipsum dummy textum ... Lorem ipsum dummy textum ... Lorem ipsum dummy textum ...<p></li>
            </ul>
        </div>
        </div>

当然，与内联样式相比，将这些更新存储在样式表中会更好，但这会告诉您需要做什么。

Answer 3

您可以使用float:left（在“关于我”）和overflow:hidden（在文本的其余部分）来实现您想要的布局。

这是一个带有<span> 标签和style 属性的实现，只是为了说明发生了什么：

<li>
    <span style="float: left;">
        <b class="underb" style="color: #af1e83;">About me</b>
        <b style="color: #af1e83;">:</b>
    </span>
    <span style="display:block; overflow:hidden; padding-left:.5em;">
        Lorem ipsum dummy textum Lorem ipsum dummy textum Lorem ipsum dummy textum Lorem ipsum dummy textumLorem ipsum dummy textum Lorem ipsum dummy textum Lorem ipsum dummy textum Lorem ipsum dummy textum Lorem ipsum dummy textum
    </span>
</li>

• http://jsfiddle.net/fpzkx/

我对@9​​87654322@ 的回答使用了相同的技术；阅读可能会使它更清晰。