0

所以我一直在与这种情况作斗争。
标记

<div id="container">
        <div class="grid">
            <div class="col-1-4">
                <div class="module">
                    <h3>1/4</h3>
                </div>
            </div>
            <div class="col-1-2">
                <div class="module">
                    <h3>1/2</h3>
                </div>
            </div>
            <div class="col-1-4">
                <div class="module">
                    <h3>1/4</h3>
            </div>
         </div>
 </div>


CSS

 *{
     box-sizing :  border-box;
 }
 [class *="col"]{
      float : left;
      height : auto;
      overflow: hidden;
 }
 .col-1-2{
      width : 50%;
 }

.col-1-4{
   width : 25%;
 }

#container{
    width : 960px;
    padding : 20px;
    margin : 10px auto 0 auto;
}

.module {
  padding: 20px;
  background: #eee;
  font-family: sans-serif; 
}

这使得列正确并排显示。但是两端相互折叠,整个东西看起来像一个大矩形。
在此处输入图像描述

现在,我尝试通过编辑现有的 CSS 样式[class*="col"]并添加padding-right : 20px到它来伪造排水沟

[class *="col"]{
    float : left;
    height : auto;
    overflow: hidden;
    padding-right : 20px;
}

现在一切看起来像

图片2

我已经设法放入排水沟,但如果你仔细观察,三个灰色矩形不在容器 div 内居中,它们更多地被推向右侧。
在此处输入图像描述如何应对这种情况?如果有人建议一种更好的方法来添加排水沟,那将非常有帮助。
谢谢
(图片中的蓝色突出显示列的实际大小)

4

2 回答 2

1

您可以在块的左右边框添加填充

[class *="col"]{
    float : left;
    height : auto;
    overflow: hidden;
    padding : 0 10px;
}

#container{
    padding:10px;
}
于 2014-06-13T09:58:34.330 回答
0

请尝试更改您的 CSS 如下

[class *="col"]{
    float : left;
    height : auto;
    overflow: hidden;
    padding-left: 20px;
}

将以下内容添加到您的 CSS

[class *="col"]:first-child{
     padding-left : 0px;
}
于 2014-06-13T09:56:32.750 回答