如何使父级元素根据其子元素的内容自适应拉伸?

3

我知道这个问题已经被问了很多次,但是相信我,我尝试了所有的解决方案,但似乎都不起作用。我承认,几周前我刚开始学习网页设计,现在正在帮助一个朋友建站。该网站是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 -->

文章容器是我需要拉伸的部分。我需要它根据其子div内容的变化而拉伸。
具体来说,“post-title”和“post-content”这两个div类是具有可变div的类。当它们内部的内容增加时,我希望它们的父div能够伸展以适应它们。然后,它们的父div会伸展以适应它们,直到最上层的父div(即文章容器)也会伸展以适应变化。
我需要这样做的原因是为了防止在缩小浏览器宽度(例如平板电脑上)时发生内容溢出。
如果需要,请使用Firebug访问网站查看CSS。www.buntufang.com。前页文章发布。减小浏览器大小(宽度),以了解我的意思。
我尝试过很多解决方案,例如在子div的CSS中放置overflow:hidden和height:auto,这主要是float:left。这可以拉伸所有父div,除了最顶层的一个(文章div :),它顽固地拒绝伸展。
我还尝试使用clearfix,但不确定是否做得正确。
总之,这就是我的问题。我会感激任何答案或建议。

你的网站有没有实时版本? - Cam
1个回答

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
我解决了我的问题。我意识到子内容具有绝对位置而不是相对位置,并且父容器一直在折叠。我将父容器高度设置为自动,子div的位置设置为相对位置。 我选择了您的答案作为最佳答案,因为在尝试您的方法时,我解决了另一个浮动列的问题,而且没有其他答案。谢谢。 - Emmanuel N K

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接