Заставить абзац использовать максимально доступную высоту

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

Если бы я должен был сделать это в вертикальном направлении, я бы просто установил ширину div. Но если я установлю высоту, абзац превратится в одну строку, делая поле максимально широким.

Как заставить абзац иметь столько строк, сколько позволит высота, а затем увеличить ширину по мере необходимости

Я попытался использовать min-height:100px для абзацев, но оставшаяся высота заполнена пробелами, а текст все еще находится на одной строке.

Вот пример того, что я пытаюсь сделать. Как видите, текст остается на одной строке. Я хотел бы, чтобы он подал коробку вертикально, прежде чем делать коробку шире.

ссылка jsfiddle: http://jsfiddle.net/Kj49B/

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul class="container">
    <li class="item">
        <a href="" class="title"  target="_blank">Title 1</a>
        <br/>
        <p>A summit aimed at reducing the risk of nuclear terrorism and involving some 50 countries is about to open in South Korea's capital, Seoul</p>
    </li>
    <li class="item">
        <a href="" class="title"  target="_blank">A long title</a>
        <br/>
        <p>Watch the latest news summary from BBC World News. International news updated 24 hours a day</p>
    </li>
    <li class="item">
        <a href="" class="title"  target="_blank">A much much longer title</a>
        <br/>
        <p><img src="http://www.montrealgazette.com/6355281.bin" align="left"/>Freshly crowned NDP leader Thomas Mulcair has vowed to make Prime Minister Stephen Harper's Tories his main adversary and he moved quickly to assure his own party that there won't be a housecleaning of staff</p>
    </li>
    <li class="item">
        <a href="" class="title"  target="_blank">A long title that goes on and on until it is very very long</a>
        <br/>
        <p>Pope Benedict XVI condemns drug-trafficking and corruption at a huge open-air Mass in central Mexico as part of his first visit to the country</p>
    </li>       
</ul>
</body>
</html>

Вот CSS, который идет с ним:

body
{
    font-family:sans-serif;
}

.container
{
    width:95%;
    margin-left:auto;
    margin-right:auto;
    align:center;
}

.item
{
    margin-left:auto;
    margin-right:auto;
    display:inline-block;
    color:#000033;
    font-size:14px;
    height:180px;
    line-style:none;
    float:left;
    margin:20px;
    padding:20px;
    vertical-align:middle;
    border:1px solid #000033;
    border-radius: 50px; /*w3c border radius*/

    -webkit-border-radius: 50px; /* webkit border radius */
    -moz-border-radius: 50px; /* mozilla border radius */
}

.title
{
    color:#000033;
    text-decoration:none;
    font-size:22px;
    margin:0px;
    padding:0px
    line-height:1;
}

img
{
    height:90px;
    margin: 5px;
}

p
{
    display:block;
    margin:5px;
    width:minimum;
    padding:0px;
    min-height:80px;
    line-height:1.2;
    word-wrap:true;
}

html css paragraph
person Jonathon L    schedule 25.03.2012    source источник
comment
Вы, вероятно, захотите использовать max-height вместо min-height, если хотите, чтобы элемент не становился выше определенного значения.   -  person Christofer Eliasson    schedule 26.03.2012
comment
Что ты уже пробовал? Опубликуйте код или создайте скрипт (jsfiddle.net)   -  person yunzen    schedule 26.03.2012
comment
Это сложнее всего, чем должно (то есть без таблиц). См., например, positioniseverything.net/articles/onetruelayout/equalheight.   -  person leonbloy    schedule 26.03.2012
comment
Я добавил код. Я не думаю, что таблица будет работать, потому что я хочу, чтобы поля выпадали на новую строку, если размер окна браузера изменяется.   -  person Jonathon L    schedule 26.03.2012
comment
Связано: stackoverflow. ком/вопросы/15227350/   -  person Milche Patern    schedule 05.03.2013

Ответы (3)


arrow_upward
2
arrow_downward

Вы не можете использовать CSS. Я никогда не встречал ничего, даже в CSS3, которое поддерживало бы это изначально. Вы просите, чтобы width:auto действовало как height:auto, но это не так, потому что автоматическая высота основана на концепции строковых блоков, и не существует такого понятия, как «поле столбца» (потому что текст не является сеткой).

Таблицы с ячейками фиксированной высоты наиболее близки вам, но вы говорите в комментарии выше, что они вам не подходят по другим причинам. Даже в этом случае вы обнаружите, что поведение не является особенно последовательным или легко контролируемым.

Вы можете сделать это с помощью javascript, обнаружив коробки, которые превышают определенную высоту, а затем постепенно расширяя их, пока они не превысят ее. Если javascript тоже не вариант, то я считаю, что у вас нет вариантов.

person SpliFF    schedule 26.03.2012
comment
Спасибо за помощь. Я подумал, что это, наверное, то, к чему я клоню. Я попробую подход javascript. - person Jonathon L; 26.03.2012
comment
Лично я бы выбрал другой дизайн. Подход javascript обязательно будет дорогостоящим, поскольку браузеру необходимо пересчитывать страницу после каждого изменения размера. Поскольку у вас также есть несколько ящиков, это приведет к длительному времени загрузки, высокой загрузке процессора и потенциальному щелчку, если браузер попытается перерисовать между изменениями. Если вы думаете об этом, это, вероятно, поможет объяснить, почему для этого нет встроенной поддержки. Если вы настаиваете на этом, попробуйте начать с минимальной ширины и сделать приращение большим (например, 20 пикселей или что-то в этом роде). - person SpliFF; 26.03.2012
comment
У меня был другой взгляд. Ящики просто перескакивают на новую строку при изменении размера браузера, поэтому их самих не нужно настраивать. В конце концов я просто отрегулировал ширину в зависимости от количества символов в абзаце и добавил классы по мере необходимости на стороне сервера. - person Jonathon L; 27.03.2012

arrow_upward
1
arrow_downward

Привет, вам просто нужно указать width & height auto в вашем css, который будет работать нормально в соответствии с вашими требованиями.

просмотрите ваш обновленный css :-

body
{
    font-family:sans-serif;
}

.container
{
    width:auto;
    margin-left:auto;
    margin-right:auto;
    align:center;
}

.item
{
    margin-left:auto;
    margin-right:auto;
    display:inline-block;
    color:#000033;
    font-size:14px;
    line-style:none;
    float:left;
    margin:20px;
    padding:20px;
    height:auto;
    vertical-align:middle;
    border:1px solid #000033;
    border-radius: 50px; /*w3c border radius*/
    -webkit-border-radius: 50px; /* webkit border radius */
    -moz-border-radius: 50px; /* mozilla border radius */
}

.title
{
    color:#000033;
    text-decoration:none;
    font-size:22px;
    margin:0px;
    padding:0px
    line-height:1;
}

img
{
    height:90px;
    margin: 5px;
}

p
{
    display:block;
    margin:5px;
    width:minimum;
    padding:0px;
    line-height:1.2;
    word-wrap:true;
    height:auto;
}

ИЛИ См. скрипку:- http://jsfiddle.net/Kj49B/7/< /а>

person Shailender Arora    schedule 26.03.2012

arrow_upward
-1
arrow_downward

У вас должно быть это:

div {max-height:100px;}
p {height:100%;}

Оставьте ширину неопределенной. Конечно, вы можете легко заменить div и p идентификаторами или классами, если хотите.

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

person Lobabob    schedule 25.03.2012
comment
Это не мешает абзацу растягиваться на одну строку. Я хочу, чтобы он обернул текст, чтобы он занимал всю высоту поля. - person Jonathon L; 26.03.2012