Ich habe eine Reihe von divs, die einen kleinen Textabschnitt enthalten. Ich möchte alle divs der gleichen Höhe und variieren die Breite wie erforderlich, um den Absatz anzupassen.Absatz erzwingen, um die maximal verfügbare Höhe zu verwenden
Wenn ich dies in vertikaler Richtung tun würde, würde ich nur die Breite des div einstellen. Aber wenn ich die Höhe einstelle, wird der Absatz zu einer Linie, die die Box so breit wie möglich macht.
Wie ich den Absatz zu zwingen, so viele Zeilen zu haben, wie die Höhe in der Breite erhöhen ermöglicht dann als
ich für die Absätze mit min-height:100px versucht habe, erforderlich, aber links über Höhe mit weißen Raum gefüllt ist und die Text ist immer noch in einer Zeile.
Hier ist ein Beispiel aus was ich versuche zu tun. Wie Sie sehen können, bleibt der Text in einer Zeile. Ich würde es gerne machen, um die Box vertikal abzulegen, bevor ich die Box breiter mache.
jsfiddle Link: 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>
Hier ist die CSS die mit ihm geht:
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;
}
Sie würden wahrscheinlich wollen max-height statt min-height verwenden, wenn Sie erzwingen möchten das Element wird nicht höher als ein bestimmter Wert. –
Was hast du schon probiert? Posten Sie etwas Code oder erstellen Sie eine Geige (http: // jsfiddle.net) – HerrSerker
Dies ist am schwierigsten als es sollte (das heißt, ohne Tabellen). Siehe zB http://www.positioniseverything.net/articles/onetruelayout/equalheight – leonbloy