CSS:左对齐浮点的最佳方法:右侧部分

Question

我希望在过去的好日子里有两列表布局.它适用于http://paulisageek.com/resume,并且与以下内容完美配合:

.dates {
  float:right;
  width:171px;
}

但我相信我会打破更新的大小(以及不同的字体,浏览器和字体大小等).

有没有办法让第二列自动调整大小而不强制宽度(或使用javascript)？请问CSS3有办法吗？

Answer 1

为日期列指定最小宽度和最大宽度,而不是固定宽度.这为您提供了灵活性,但确保您的设计不会破坏:

.dates {
  float:right;
  min-width:171px;
  max-width:300px;
}

请注意,最小宽度和最大宽度不包括填充,边框或边距.

另一种可能性是使日期对齐并显示内联:

.dates p{
  text-align:right;
  display:inline;
}

这样您就不需要为日期单独的div.

...或者,如果你想成为超级前沿并确保你的布局在IE中中断,你可以使用新的CSS3列(这里不推荐,但仍然值得一读)