html – 强制段落使用可用的最大高度

2023年12月3日 203次阅读

我有一系列包含一小段文字的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;
}

最佳答案 你不能使用CSS.即使在CSS3中也没有任何东西能够原生地支持它.你要求的是宽度：自动行为像高度：自动但它不会因为自动高度基于线框的概念而没有“列框”这样的东西(因为文本不是一个网格).

具有固定高度单元格的表格是您最接近的表格,但您在上面的评论中说出由于其他原因它们不适合您.即便如此,您仍会发现行为不是特别一致或易于控制.

你可以使用javascript来检测超过一定高度的盒子,然后逐步使它们更宽,直到它们没有.如果javascript不是一个选项,那么我相信你没有选择.

点赞