[英]Three-column CSS layout - fixed/max./variable width
I'm having trouble getting the following three-column layout to work: 我无法使以下三列布局工作:
A B C
+-------+-------------------+------------+
| | | |
| Fixed | Use unused space | Resizable |
| | | |
+-------+-------------------+------------+
Where: 哪里:
Here is my best attempt at creating this: http://jsfiddle.net/x3ESz/ 以下是我创建此项目的最佳尝试: http : //jsfiddle.net/x3ESz/
All the other topics I have looked at suggest having all three as floating with B using margins to prevent wrapping, but this doesn't allow for C to resize B based on C's content (as a value must be given for B's right margin). 我所看到的所有其他主题都建议将所有三个主题与B一起浮动,使用边距来防止包装,但这不允许C根据C的内容调整B大小(因为必须为B的右边距赋予值)。
I also really want to avoid resorting to JS to achieve this. 我也真的想避免使用JS来实现这一目标。
This can easily be solved by adding overflow: hidden
to #div_middle
and removing the margins: 这可以通过添加overflow: hidden
到#div_middle
并删除边距来轻松解决:
#div_middle {
overflow: hidden;
border:1px solid #0F0;
}
See: http://jsfiddle.net/thirtydot/x3ESz/1/ 请参阅: http : //jsfiddle.net/thirtydot/x3ESz/1/
This works in all modern browsers and IE7+. 这适用于所有现代浏览器和IE7 +。
Does even work with both variable width sidebars : 甚至可以使用两个可变宽度的侧边栏:
http://jsfiddle.net/QG2EU/ http://jsfiddle.net/QG2EU/
#div_left{
float:left;
border:1px solid #F00;
}
#div_middle {
overflow: hidden;
border:1px solid #0F0;
}
#div_right {
float:right;
border:1px solid #00F;
}
You can fix it without changing your layout if you use this script: 如果您使用此脚本,则可以在不更改布局的情况下修复它:
$(document).ready(function() {
$('#div_right').click(function() {
$(this).append('--');
$('#div_middle').css("margin-right", $('#div_right').width() + 2 +"px");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.