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

Question

首先，我要说我不想要响应式布局。解决了这个问题...

我有一个 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(); ?>

Answer 1

无需借助 JavaScript 即可实现此目的的唯一方法是浮动容器本身，例如 jsFiddle。

如果您可以使用 jQuery，那么您可以使用 这个 jsFiddle。

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

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

Answer 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 );

This is from jQuery - 将 div 宽度设置为其子级的总和

Answer 3

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

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

这是一个实时示例。其中最有用的部分是 outerWidth 方法，它带有一个参数指示返回值中是否应包含保证金。