Question

首先，我要说我不想要一个响应式布局。随着那个安定下来......

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

我正在寻找一种方法，使容器等于其他两个 的宽度，包括 .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，那么您可以使用this 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，但你需要设置宽度或最小宽度，以防止半流体部分（它将包裹如果broswer窗口小于内容）。对于宽度，就像你建议你可以使用jQuery。

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

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

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

Answer 3

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

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

这是一个live example。最有用的部分是outerWidth方法，它采用一个参数来指示是否应该在返回值中包含保证金。

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

3 个答案: