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

时间:2014-05-22 05:09:39

标签: html css

我知道这个问题已被多次询问,但相信我,我已经尝试了所有的解决方案,但似乎都没有。我承认,几周前我刚刚开始进行网页设计,而且我正在帮助一个有网站的朋友。该网站 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,但我不确定我做得对。

无论如何,这是我的问题。我很感激任何答案或建议。

1 个答案:

答案 0 :(得分:0)

这是一个可行的解决方案。你可以玩它,但是当我希望单元格具有相同的高度时,即使具有可变的高度和内容,这也可以为我完成工作。

看看: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
}