灵活的 DIV 容器(但不响应)
首先,我要说我不想要响应式布局。解决了这个问题...
我有一个 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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
无需借助 JavaScript 即可实现此目的的唯一方法是浮动容器本身,例如 jsFiddle。
如果您可以使用 jQuery,那么您可以使用 这个 jsFiddle。
确保您的规则非常具体,以便
.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.
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.我通常使用
display: inline-block;
和overflow: auto;
来处理这个问题,您需要注意的是,这将是半流体,但会正确包含div,但您需要设置宽度或最小宽度以防止半流体部分(如果浏览器窗口小于内容,它将换行)。对于宽度,就像您建议的那样,您可以使用 jQuery。
您将能够使用其子级的总和,例如
This is from jQuery - 将 div 宽度设置为其子级的总和
I usually handle this with
display: inline-block;
andoverflow: auto;
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
This is from jQuery - set div width to sum of it's children
这应该可以解决问题。在这种形式中,它计算
.container
的所有子级的宽度,但您可以轻松地向children
添加选择器以仅使用.left
和.right
:这是一个实时示例。其中最有用的部分是
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 tochildren
to use only.left
and.right
: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.