CSS相对大小列不等宽问题

发布于 2024-11-07 18:03:32 字数 290 浏览 0 评论 0原文

我正在尝试基于 oocss 框架实现相对宽度列。为了在列之间添加装订线,我在列及其内容之间添加了一个内部 div。

问题是我最终得到宽度不等的列...

我可以通过对第一列和最后一列使用相同的填充来避免这种情况,但由于我想嵌套列,它会在右侧和左侧产生移位。这

是一个小提琴:

http://jsfiddle.net/WxPSm/2/

欢迎任何想法!

谢谢

I'm trying to implement relative width columns based on the oocss framework. In order to add a gutter in between the columns I added an inner div in between the columns and their content.

The problem is that I end up with columns of unequal width...

I could avoid this by having the same padding for the first and last columns but since I want to nest columns it would create a shift on the right and the left...

Here is a fiddle:

http://jsfiddle.net/WxPSm/2/

Any idea welcomed!

Thanks

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

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

发布评论

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

评论(1

帅冕 2024-11-14 18:03:32
.unit > .content:first-child {
padding: 0 2em;

问题

出在你的内部 .content div 上。中间列的两侧都应用了填充,而左列仅在右侧具有填充,而右列仅在左侧具有填充。

外部单元 div 的大小均相同。如果您需要视觉效果,使用 firebug 检查元素可以很好地突出显示填充。

.unit > .content:first-child {
padding: 0 2em;

}

The problem is with your inner .content divs. The middle column has padding being applied on both sides where as the left column only has padding on the right and the right column has only padding on the left.

The outer unit divs are all the same size. Using firebug to inspect the elements highlights the padding very well if you need a visual.

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