灵活的 DIV 容器(但不响应)

发布于 2024-12-05 09:09:51 字数 2870 浏览 4 评论 0原文

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

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

First, let me say I do NOT want a responsive layout. With that settled...

I have a div container (which we will call ".container") and two elements inside of it (my content, which we will call ".left" and a sidebar which we will call ".right").

I am looking for a way to make the container equal the width of the other two including the 15px margin on .right.

I do not want to simply set the container to 715px and do not want a CSS3 solution, I want the container to be set to 715px automatically. I do not know if this is achievable through CSS but I am sure it is through jQuery. If anybody knows the easiest/cleanest/fastest way to do this it would be appreciated!

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

EDIT:
MY CURRENT MARKUP

#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(); ?>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

却一份温柔 2024-12-12 09:09:51

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

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

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

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

The only way you can do this without resorting to javascript is by floating the container itself, like this jsFiddle.

If you're okay using jQuery for it, then you can use this jsFiddle.

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

Make sure you're very specific with your rules here so that .left and .right only return a single element. You're probably better off switching to IDs instead of class names in this regard.

和影子一齐双人舞 2024-12-12 09:09:51

我通常使用 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 宽度设置为其子级的总和

I usually handle this with display: inline-block; and overflow: auto;

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

What you'll need to watch for is that this will be semi-fluid but will correctly contain the divs but you'll need to set a width or min-width to prevent the semi-fluid part (it'll wrap if the broswer window is smaller than the content). For the width, like you suggested you can use jQuery.

You'll be able to use a sum of its children such as

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

This is from jQuery - set div width to sum of it's children

萌能量女王 2024-12-12 09:09:51

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

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

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

This should do the trick. In this form it calculates the width of all children of .container, but you could easily add a selector to children to use only .left and .right:

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

Here's a live example. The most useful part of this is the outerWidth method, which takes a parameter indicating whether or not margin should be included in the returned value.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文