html - 如何根据 child 的内容使父 div 拉伸(stretch)？

Question

我知道这个问题已经被问过很多次了，但相信我，我已经尝试了所有的解决方案，但似乎都没有用。我承认，几周前我才开始网页设计，我正在帮助一个 friend 做网站。该站点是 www.buntufang.com

这是我遇到的问题(我更喜欢 CSS HTML 解决方案，因为我不了解 javascript(并且我正在使用 Firefox 29 和 Firebug)):

主页有文章帖子。帖子中有特色文章图片、标题和当您将鼠标悬停在其上方时显示的描述。 我遇到的问题是，当处于响应模式(减小浏览器宽度或平板设备上的类似模式)时，内容会溢出。 我想这样设计，当标题或内容很长并且溢出时，包含内容的 div 会拉伸(stretch)以适应溢出

HTML:

<!-- POST ENTRY START -->
<div id="post-entry">
<section class="post-entry-inner">

<?php
if ( ( is_home() || is_page_template('template-blog.php') ) && get_theme_option('slider_on') == 'Enable' ) :
if ( $paged >= 2 || $page >= 2 ) { } else { ?>
<?php get_template_part( 'lib/sliders/gallery-slider' ); ?>
<?php }
endif; ?>

<?php $oddpost = 'alt-post'; $postcount = 1; if (have_posts()) : while (have_posts()) :  the_post();
$thepostlink = '<a href="'. get_permalink() . '" title="' . get_the_title() . '">';
?>

<?php do_action( 'bp_before_blog_post' ) ?>

<!-- POST START -->
<article <?php post_class('home-post ' . $oddpost); ?> id="post-<?php the_ID(); ?>">

<?php echo get_featured_post_image("<div class='post-thumb in-archive'>".$thepostlink, "</a></div>", 350, 200, "alignleft", "medium", 'image-'.get_the_ID() ,get_the_title(), false); ?>

<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
     <div class="article-blk">
        <?php get_template_part( 'lib/templates/post-meta-home' ); ?>
        <div class="sharebox-wrap">
        <?php get_template_part( 'lib/templates/share-box' ); ?>
        </div>
        <h1 class="post-title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
     </div>
</div>
<div class="popup_information">
     <!-- The thing or things you want to popup go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
   <!--  <div class="post-content"> <?php echo get_custom_the_excerpt(30); ?> </div>--> 
     <a href="<?php the_permalink(); ?>"><div class="post-content"><?php echo get_custom_the_excerpt(40); ?> </div></a>
</div>
</div>

<span class="post-category single-post-category">
<?php echo get_singular_cat(); ?>
</span>


</article>
<!-- POST END -->

文章容器是我需要拉伸(stretch)的容器。我需要它根据它的子 div 的内容变化来拉伸(stretch)。 详细地说，div 类“post-title”和“post-content”是具有可变 div 的类。当它们中的内容增加时，我希望它们的父 div 拉伸(stretch)以容纳它们。他们的父 div 会拉伸(stretch)以适应它，直到最上面的父 div(文章容器)也拉伸(stretch)以适应变化。

我需要它的原因是这样内容溢出不会发生在浏览器宽度减小的情况下，就像在平板电脑上一样。

如果需要，请使用 firebug 访问站点以查看 CSS。 www.buntufang.com.头版文章发帖。减小浏览器大小(宽度)以了解我的意思。

我已经尝试了很多解决方案，比如在子 div 的 CSS 中放置 overflow:hidden 和 height:auto，它们大多是 float:left。这完成了拖下除顽固地拒绝拉伸(stretch)的最上面的一个(文章 div :) 之外的所有 appent div。 我也尝试过使用 clearfix，但我不确定我做对了。

无论如何，这是我的问题。我将不胜感激任何答案或建议。

Answer 1

这是一个可行的解决方案。您可以尝试使用它，但当我希望单元格具有彼此相同的高度时，即使高度和内容可变，这也能帮我完成工作。

看看:fiddle

CSS

div.content {
    display: table;
}
div.box {
    width: 300px;
    display: table-cell;
    vertical-align: top;
    background: #ccc;
    margin: 10px
}

最后一个变化。您可以使用 Flex 代替表。 http://jsfiddle.net/cornelas/5rRhp/2/

div.content {
    display: flex;
}
div.box {
    width: 300px;
    vertical-align: top;
    background: #ccc;
    margin: 10px
}