Как выровнять текст следующим образом, используя 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

Обновление 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>

Конечно, было бы лучше сохранить эти обновления в таблице стилей, а не встроенными стилями, но это покажет вам, что нужно сделать.1006 *

Answer 2

Вы можете использовать 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/

Мой ответ на на этот вопрос использовал ту же технику; чтение, которое может сделать это немного яснее.

Answer 3

Как бы безумно это не звучало, вы можете использовать table.

У вас есть набор заголовков с набором данных.Для меня это звучит как стол.