灵活的 DIV 容器（但不响应）答案

【问题标题】：Flexible DIV Container (But Not Responsive)灵活的 DIV 容器（但不响应）
【发布时间】：2011-09-19 17:07:05
【问题描述】：

首先，让我说我不想要响应式布局。就这样解决了……

我有一个 div 容器（我们称之为“.container”）和其中的两个元素（我的内容，我们称之为“.left”和一个侧边栏，我们称之为“.right”）。

我正在寻找一种方法使容器的宽度等于其他两个包括 .right 上的 15px 边距。

我不想简单地将容器设置为 715px，也不想使用 CSS3 解决方案，我希望容器自动设置为 715px。我不知道这是否可以通过 CSS 实现，但我确信它是通过 jQuery 实现的。如果有人知道最简单/最干净/最快的方法，将不胜感激！

.container {
}
.left {
width: 500px;
float:left
}
.right {
width: 200px;
margin-left:15px;
float:right
}

编辑：我当前的标记

#container {
    margin:0 auto;
    overflow:auto;
    clear:both;
    padding:35px 0
}

#post_content {
    clear:both;
    display:inline-block;
    float:left;
    width:660px;
    padding:0 35px 0 0;
    border-right:1px solid #EEE;
    background:#FFF
}
#sidebar {
    display:inline-block;
    float:right!important;
    width:410px;
    overflow:hidden
}


<?php get_header(); ?>

<div id="container">
<div id="post_content">

<!-- Grab posts -->
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>

<!-- Breadcrumbs -->
<?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?>

<!-- Avatar -->
<span class="post_avatar">
    <a href="<?php echo get_bloginfo('url') . '/author/' . get_the_author_meta('login'); ?>">
    <?php echo get_avatar( get_the_author_email(), '50' ); ?>
    </a>
</span>

<!-- Title -->
<h1 class="post">
    <?php the_title(); ?>
</h1>

<!-- Post time, author, category -->
<span class="sub-title-post">By <?php the_author_posts_link( ); ?> <span class="sub-title-divider">|</span> <?php the_time('F j, Y'); ?> <span class="sub-title-divider">|</span> <a href="#commentlist"><?php comments_number( 'No comments', 'One comment', '% comments' ); ?></a>
</span>


<!-- The post -->
<?php the_content(); ?>

<!-- Tags -->
<div class="tag_spacer">

    <h3 class="tags">
    <?php the_tags('Tags ',' / ','<br />'); ?>
    </h3>

    <h3 class="tags">
    <?php $turl = getTinyUrl(get_permalink($post->ID));
echo 'Short URL <a href="'.$turl.'">'.$turl.'</a>' ?>
    </h3>
</div>

<!-- Next/Previous Posts -->
<div class="mp_archive2">
<div id="more_posts">

<div class="oe">
    <?php previous_post_link('%link', '« Previous post', TRUE); ?>
</div>

<div class="re">
    <?php next_post_link('%link', 'Next post »', TRUE); ?>
</div>

</div>
</div>

<?php comments_template(); ?>

</div>
<?php endwhile; else: ?>
<p>No matching entries found.</p>
<?php endif; ?>

<?php get_sidebar(); ?>

</div>


</div>

<?php get_footer(); ?>

【问题讨论】：

标签： jquery html css containers

【解决方案1】：

不使用 javascript 的唯一方法是浮动容器本身，例如 jsFiddle。

如果你可以使用 jQuery，那么你可以使用this jsFiddle。

$().ready(function(){
   $('.container').width($('.left').outerWidth(true) + $('.right').outerWidth(true)); 
});

确保您在此处的规则非常具体，以便 .left 和 .right 只返回一个元素。在这方面，您最好切换到 ID 而不是类名。

【讨论】：

您的 HTML 代码实际上是什么样的？我提供的 jsFiddle 链接有效吗？如果是这样，您的代码中还有其他事情会阻止它工作。
谢谢！它是 WordPress 中的一个插件（并非总是如此。）。

【解决方案2】：

我通常使用display: inline-block; 和overflow: auto; 来处理这个问题

.container {
overflow: auto;
}
.left {
width: 500px;
display: inline-block;
}
.right {
width: 200px;
margin-left:15px;
display: inline-block;
}

您需要注意的是，这将是半流体，但会正确包含 div，但您需要设置宽度或最小宽度以防止半流体部分（它会换行如果浏览器窗口小于内容）。对于宽度，就像您建议的那样，您可以使用 jQuery。

您将能够使用其子项的总和，例如

var sum=0;
$('#container.div').each( function(){ sum += $(this).width(); });
$('#container').width( sum );

这是来自jQuery - set div width to sum of it's children

【讨论】：

【解决方案3】：

这应该可以解决问题。在这种形式中，它会计算 .container 的所有子项的宽度，但您可以轻松地将选择器添加到 children 以仅使用 .left 和 .right：

$(".container").width(function() {
   var total = 0;
    $(this).children().each(function() {
       total += $(this).outerWidth(true); 
    });
    return total;
});

这是live example。其中最有用的部分是outerWidth 方法，它接受一个参数，指示是否应在返回值中包含边距。

【讨论】：