0
我對我的網站有一個非常具體的問題，我似乎無法想出一個更簡單的解決方案，因爲我使用的當前解決方案非常乏味。所以我有三個專欄，每個專欄都有一張圖片和一張關於該圖片的小圖片。當我必須改變每個單獨列的高度時，問題就來了。自動調整內容的高度
目前，我已經指定了每列的高度，如果我決定在圖像下面添加更多文本，我必須手動更改可能很乏味的列的高度。我只想讓每列自動自動調整高度，底部邊框應該是一條直線。看看圖片，瞭解我的意思。
這裏的圖像
http://i44.tinypic.com/2qipv06.jpg
HTML
<article class="in-column" style="height:362px;"> <a href="http://www.yahoo.com"> <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" height="200" width="300"></a>
<p class="excerpt">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism
</article>
<article class="in-column" style="height:374px;"> <a href="http://www.yahoo.com"> <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" width="300" height="200"></a>
<p class="excerpt">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism
</article>
</section>
<section id="middle-container">
<article class="in-column" style="height:377px;"> <a href="http://www.yahoo.com"><img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" width="300" height="200"></a>
<p class="excerpt">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism
</article>
<article class="in-column" style="height:359px;"> <a href="http://www.yahoo.com"><img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" width="300" height="200"></a>
<p class="excerpt">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism
</article>
</section>
<section id="right-container" class="right-column" style="width:351px; border-right: 1px solid #dddddd;">
<article class="in-column" style="height:343px;"><a href="http://yahoo.com"> <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" width="300" height="200"></a>
<p class="excerpt">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism
</article>
<article class="in-column" style="height:393px;"> <a href="http://yahoo.com"> <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" height="200" width="300"></a>
<p class="excerpt">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism
</article>
</section>
</section>
CSS
#content .subheading {
color: #657B83;
font-size: 22px;
height:40px;
box-shadow: 0px 2px 4px rgb(204, 204, 204);
padding-top:10px;
position: relative;
margin-bottom: 0px;
}
#content {
overflow: hidden;
width: 1055px;
}
.right-column {
width: 350px;
float: left;
border-left: 1px solid #dddddd;
}
.left-column {
width: 350px;
float: left;
border-right: 1px solid #dddddd;
border-left: 1px solid #dddddd;
}
article.in-column {
border-bottom: 1px solid #dddddd;
text-align: left;
padding-left: 25px;
padding-right: 25px;
padding-top: 15px;
}
article.in-column .excerpt {
color: #2f2f2f;
font-size: 12px;
margin: 0;
padding-bottom: 5px;
font-family:"Segoe UI";
}
#middle-container {
width: 350px;
float: left;
position: relative;
}
您建議的解決方案是修復列問題，而不是行。我已經看到很多有關列高度的討論，但這並沒有幫助我填充行的高度直到屏幕底部。顯示：表格和表格單元格不自動不填充/調整高度。 – wei