Question

我有一个简单的页面将内容流入列。有没有办法在每列上应用内部填充？我看到了柱间隙属性，但是我认为这不适用于第一列的左侧。另外，我需要我的列正好是300px宽。这是我的设置：

<html>
 <head>
   <style>
    .columns {
      column-width: 300px;
    }
   </style>
 </head>
 <body>
   <div class="columns">  
      ...
   </div>
 </body>
</html>

理想情况下会有一些属性：

column-inner-padding: ...;

我可以通过在列中的所有元素上明确设置填充来实现此功能，但这不能很好地扩展：

.columnsParagraph {
   padding-left: 20px;
   padding-right: 20px;
}

...

<div class="columns">  
  <p class="columnsParagraph">...</p>
  <p class="columnsParagraph">...</p>
  <p class="columnsParagraph">...</p>
  ...
</div>

谢谢

Answer 1

您可以让类更改应用该类的元素下的元素样式。 Star Selector

这会将样式应用于具有列类的元素下游任何位置的每个元素。

.columns *

这会将样式应用于具有列类的元素中的每个直接后代元素。

.columns > *

您也可以将*替换为任何其他选择器，例如p以应用于列下方的所有p标记。

Answer 2

在css中试试这个：

.columnsParagraph{
    padding:5px;
}

列填充的内部填充？

2 个答案: