CSS:左对齐浮动的最佳方式:右部分
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1944175/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Best way to left align a float:right section
提问by Paul Tarjan
I want what in the good old days would be a two-column table layout. It's for http://paulisageek.com/resumeand is working perfectly with:
我想要在过去的美好时光是两列表格布局。它适用于http://paulisageek.com/resume并且与以下产品完美配合:
.dates {
float:right;
width:171px;
}
but I'm sure I'll break the sizes on updates (and different fonts, and browsers, and font-sizes, etc).
但我确信我会在更新时改变大小(以及不同的字体、浏览器和字体大小等)。
Is there a way to make the second column autosize without forcing a width (or using javascript)? Will CSS3 have a way?
有没有办法在不强制宽度(或使用javascript)的情况下使第二列自动调整大小?CSS3 会有办法吗?
回答by Gideon
Give your dates column a min-width and a max-width instead of a fixed width. This gives you flexibility but ensures your design won't break:
为您的日期列指定最小宽度和最大宽度,而不是固定宽度。这为您提供了灵活性,但可确保您的设计不会中断:
.dates {
float:right;
min-width:171px;
max-width:300px;
}
Note that min-width and max-width do not include padding, borders, or margins.
请注意, min-width 和 max-width 不包括填充、边框或边距。
Another possibility is make the dates to align right and display inline:
另一种可能性是使日期右对齐并内联显示:
.dates p{
text-align:right;
display:inline;
}
This way you won't need a separate div for the dates.
这样你就不需要单独的 div 日期了。
...Or, if you want to be super-cutting-edge and ensure that your layout breaks in IE, you can use the new CSS3 columns(not recommended here, but still worth reading)
...或者,如果您想成为超级前沿并确保您的布局在 IE 中中断,您可以使用新的 CSS3 列(此处不推荐,但仍然值得一读)
回答by cletus
What you've got here is something that works extraordinarily well and easily with tables. Not only that it's incredibly backwards compatible. In "pure" CSS it's hard. You can make one of the columns variable width but not both. If you really need that, stick with tables (irrespective of what the semantic HTML zealots might say).
你在这里得到的东西非常好和容易地与表格一起工作。不仅是它令人难以置信的向后兼容。在“纯”CSS 中很难。您可以将列之一设为可变宽度,但不能同时设为两者。如果你真的需要,坚持使用表格(不管语义 HTML 狂热者可能会说什么)。