私のウェブサイトで非常に具体的な問題が発生していますが、現在使用しているソリューションは非常に面倒なので、簡単なソリューションを思いつくことができないようです。3 つの列があり、それぞれに画像とその下にある画像の簡単な説明があります。問題は、個々の列の高さを変更する必要がある場合です。
現在、各列の高さを指定していますが、画像の下にテキストを追加する場合は、列の高さを手動で変更する必要があり、面倒です。各列の高さを自動的に自動調整できるようにしたいだけで、下の境界線は直線にする必要があります。私が何を意味するかを理解するために画像を見てください。
画像はこちら
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;
}