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