Как я могу сделать перенос содержимого div без установки явной ширины?

Question

Я хочу иметь серию постов с заголовками и другой информацией. Проблема заключается в том, что в зависимости от того, сколько места имеет содержащийся div и какова длина заголовков, это заставляет мой «post-summary» (заголовок, дату и т. Д.) Div переноситься на следующую строку, делая его похожим на:

Вот что он делает:

Вот что я хочу, чтобы это было сделано (обратите внимание, что заголовок перенесен, но не заставил весь "post-summary" перенести на следующую строку, как в предыдущем примере):

Мне все равно, сколько заголовок переносит или сколько строк переносит. Я просто не хочу, чтобы родительский div, который также содержит информацию о посте, опускался ниже номера поста, как в первом примере.

Я создал пример jsfiddle для дальнейшей иллюстрации того, что я делаю: http://jsfiddle.net/aZvVU/6/

Как сделать так, чтобы заголовки пост-заголовков просто переносились, когда в них недостаточно места, и чтобы из-за этого не делалось полное разделение "после суммирования" при переходе на следующую строку? Я не хочу фиксировать ширину заголовка, если смогу избежать этого.

Answer 1

Вы можете просто сделать несколько настроек вашего кода следующим образом:

.post-list
{
    float: left;
    margin-right: 250px;  /* make sure it doesn't touch your right-nav*/
}

.right-nav
{
    background-color: #c0c0c0;
    padding: 10px;
    min-height: 300px;
    width: 200px;
    position: absolute; right: 0px; top: 0px; /* position it */
}

Вот рабочий пример с вашим кодом http://jsfiddle.net/YumSP/

отредактировано для исправления переноса заголовка http://jsfiddle.net/YumSP/1/

Answer 2

Вы можете использовать это как отправную точку http://jsfiddle.net/A8csU/

HTML:

<div id="parent">
    <div id="right-child">
        <p>Right stuff.</p>
    </div>
    <div id="left-child">
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It  has roots in a piece of classical Latin literature from 45 BC, making it  over 2000 years old. Richard McClintock, a Latin professor at  Hampden-Sydney College in Virginia, looked up one of the more obscure  Latin words, consectetur, from a Lorem Ipsum passage, and going through  the cites of the word in classical literature, discovered the  undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33  of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by  Cicero, written in 45 BC. This book is a treatise on the theory of  ethics, very popular during the Renaissance. The first line of Lorem  Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section  1.10.32.</p>
    </div>
</div>

CSS:

#left-child {
 border: 1px solid red;
    margin-right: 102px; /* 100px + 1px border + 1px border */
}

#right-child {
    width: 100px;
    border: 1px solid blue;
    float: right;
}

Answer 3

Бросьте плавающее на .post-summary, вам это не нужно, и это вызывает ваше завертывание. Затем добавьте margin-left: 40px; к .post-summary, чтобы обеспечить место для .post-number, и создайте иллюзию столбца полной высоты для .post-number, не разбирая высоты.

Чтобы разобраться с навигационной панелью, сбросьте плавающее поле с .post-list и убейте свои очищенные поля <div> s. Если вы хотите, чтобы панель навигации занимала целый столбец, добавьте margin-right:220px к .post-list.

Например:

• http://jsfiddle.net/ambiguous/tGQeJ/1/ (без правого поля 220px)
• http://jsfiddle.net/ambiguous/tGQeJ/2/ (с правым полем 220px)