Question

我不是CSS专家（主要是因为我最近没有需要使用太多HTML / CSS的东西），所以我想出了以下样式/ div来创建一个4列布局：

    <style type="text/css">
        <!--
        .columns:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        * html .columns {height: 1%;}
        .columns{ display:inline-block; }
        .columns{ display:block; }
        .columns .column{
          float:left;
          overflow:hidden;
          display:inline;
        }
        .columns .last{ float:right; }

        .col4 .first{ left: auto;width:25%; }
        .col4 .second{ left: auto;width:25%; }
        .col4 .third{ left: auto;width:25%; }
        .col4 .last{ left: auto;width:25%; }
        -->
    </style>

注意： 大部分内容来自this google result，我只是将其调整为4列。

HTML然后看起来像这样：

<div class="columns col4">
 <div class="column first”> SOME TEXT  </div><!-- /.first -—>
 <div class="column second”> MORE TEXT</div><!—- /.second -—>
 <div class="column third”> SOME MORE TEXT </div><!—- /.third -->
 <div class="column last”> SOME LAST TEXT </div><!-- /.last -—>
</div><!-- /.columns -->

好的，我已经简化了一点（那里有一个小图片和一些＆lt; h2＆gt;文本），但问题是我想在列之间添加一些空格。以下是它现在的样子： Columns And Space http://i44.tinypic.com/4pxfkp.jpg

你知道我应该触摸什么CSS属性吗？

注意：如果我添加边距或填充，一列会向下移动，因为（据我所知）它不适合。可能还有其他的CSS，因为这是一个模板（我已被要求进行此更改，但我没有像往常一样做这些）。

感谢您的任何见解。

Answer 1

您需要为列添加填充。但是当你这样做时，你还需要从width属性中减去相同的数量。这是因为box-model。

.col4 .first{ left: auto;width:24%; padding-right:1% }
.col4 .second{ left: auto;width:24%; padding-right:1% }
.col4 .third{ left: auto;width:24%; padding-right:1% }
.col4 .last{ left: auto;width:24%; padding-right:1% }

Answer 2

内边距=填充

Answer 3

http://www.w3schools.com/css/css_padding.asp

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

将内边距添加到4列CSS

3 个答案: