Question

我知道这个问题已被多次询问，但相信我，我已经尝试了所有的解决方案，但似乎都没有。我承认，几周前我刚刚开始进行网页设计，而且我正在帮助一个有网站的朋友。该网站 www.buntufang.com

这就是我遇到的问题（我更喜欢CSS HTML解决方案，因为我不了解javascript（我使用Firefox 29和Firebug））：

主页上有文章帖子。随帖子是一个特色文章图像，标题和描述，显示你何时悬停在它上面。我遇到的问题是，当处于响应模式（平板电脑设备上的浏览器宽度减少或类似情况）时，内容会溢出。我想设计它，以便当标题或内容很长并且溢出时，包含内容的div会延伸以适应溢出

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 -->

物品容器是我需要拉伸的容器。而且我需要它根据它的孩子们来伸展＆＃39;改变内容。详细说明，div class＆＃34; post-title＆＃34;和＆＃34;后期内容＆＃34;是具有可变div的那些。当它们中的内容增加时，我希望它们的父div伸展以适应它们。而父母div延伸以容纳它，所以直到作为物品容器的最上面的父div也伸展以适应变化。

我需要它的原因是内容溢出不会在缩小的浏览器宽度中出现，就像在平板电脑上一样。

如果需要，请使用firebug访问该网站以查看CSS。 www.buntufang.com。首页文章发布。减少浏览器大小（宽度）以查看我的意思。

我尝试了许多解决方案，例如在子div的CSS中放置overflow：hidden和height：auto，这些都是float：left。这样就完成了所有aprent div的拖拽，除了最顶层的一个（文章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
}

如何根据孩子的内容进行父母拉伸？

1 个答案: