3

简而言之，我正在研究具有列和行的响应式 Web 布局。每个列宽都设置为与预定义的总宽度相关：

列宽/总宽度=宽度%

并且高度是固定的。

现在的问题是，我希望内容宽度是流动的，但边距和填充是固定宽度，如下所示。

在此处输入图像描述

在此处输入图像描述

代码看起来像这样：

HTML

<body>
   <div id="left">Left</div>
   <div id="middle">Middle</div>
   <div id="right">Right</div>
</body>

CSS

div {
   float: left;
   padding: 0.5em;
   box-sizing: border-box;
   width: 33.3333333333333%; height 5em; line-height: 5em; text-align: center;
}    

#left {
   background-color: red;
}

#middle {
   background-color: green;
}

#right {
   background-color: blue;
}

http://jsfiddle.net/langoon/Zxn8E/2/

我想到了一些解决方案，但似乎没有一个能满足我的要求：

  1. 将'box-sizing'设置为'margin-box'。大多数浏览器不支持。
  2. 使用边框代替边距。以后我可能想要那个边框并设置不同的样式。
  3. 将每个盒子嵌套在一个外部“div”中。我更喜欢将要处理的 DOM 的元素数量保持在最低限度。
  4. 按照此处的建议设置负边距 流体列布局，它们之间有固定的像素边距？. 似乎每行都需要一个包装“div”，这可能会给我带来问题。
  5. JavaScript。不，谢谢。

我是想一边吃蛋糕一边吃，还是有办法做到这一点而没有缺点？

4

3 回答 3

3

使用 :before / :after

我玩得很开心:before，:after用一个矩形覆盖了每个排水沟的一半：http: //jsfiddle.net/PhilippeVay/Zxn8E/11/（注意结束标签的位置，以防止内联块元素之间出现任何空格）

兼容性： IE8+ 和 IE7 及更低版本不理解这些伪代码。

使用灵活的盒子布局模块

这个 CSS3 模块将让你有等宽的列，里面有排水沟，外面没有，这正是你想要实现的。几个月内语法改变了两次，没有任何问题，我还没有看过新的。
caniuse.com 上的兼容性（无 IE9-，无 Opera）

于 2012-08-20T18:24:38.457 回答
1

我认为解决这个问题的最好方法是使用负边距和box-sizing属性。一个简单的例子：

HTML：

<ul>
    <li><div class="red">Red</div></li>
    <li><div class="green">Green</div></li>
    <li><div class="blue">Blue</div></li>
</ul>

CSS：

ul
{
    list-style: none;
    margin: 0 0 0 -15px; /* Note the negative margin */
    padding: 0;
    overflow: hidden;
}

li
{
    float: left;
    width: 33.3333%;
    padding: 0 0 25px 15px;
    box-sizing: border-box;
}

/* Some decorations */
div { padding: 25px 0; color: white; text-align: center; }
div.red { background: red; }
div.green { background: green; }
div.blue { background: blue; }

结果：

在此处输入图像描述

现场演示

如果你想看到它的实际效果，我创建了一个Fiddle。

于 2013-07-19T14:50:55.100 回答
0

尝试边界路线：

http://jsfiddle.net/Zxn8E/3/

div {
    float: left;
    box-sizing: border-box;

    border-top:0.5em solid cyan;
    border-bottom:0.5em solid cyan;
    border-left:0.5em solid cyan;

    width: 33.3333333%; height 5em; line-height: 5em; text-align: center;
}    

div.last{ border-right:0.5em solid cyan; } 


<body>
  <div id="left">Left</div>
  <div id="middle">Middle</div>
  <div id="right" class="last">Right</div>
</body>
于 2012-08-20T17:31:33.557 回答