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/

我对this question的回答使用了相同的技巧;阅读可能会让它更清晰。

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

3 个答案: