Question

我的网站存在一个非常具体的问题，我似乎无法提出更简单的解决方案，因为我使用的当前解决方案很麻烦。所以我有三列，每一列都有一个图像和下面的图像的一点描述。当我必须更改每个列的高度时，问题就出现了。

目前，我已经指定了每列的高度，如果我决定在图像下面添加更多文本，我必须手动更改列的高度，这可能很乏味。我只想让每列自动调整高度，下边框应该是一条直线。看看图像，了解我的意思。

这是图片

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; 

 }

Answer 1

如果您正在寻找快速解决方法，请尝试display:table和display:table-cell。但这与IE 7有关。请查看此小提琴以获得有效的演示。

http://jsfiddle.net/LzcJx/

另请查看此链接，以便在没有任何跨浏览器问题的情况下执行此操作。

http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm

Answer 2

使用设置高度的div包裹每个</article>元素，然后将</article>元素的高度设置为100％。

这样每个</article>都是你想要的高度，其中的所有内容都是100％。

请参阅this fiddle作为示例。

自动调整内容的高度

2 个答案: