为什么此保证金抵消不能正常工作？

Question

我正在尝试在CSS中设置边距偏移量，这是它的html：

   <ui:composition template="/template.xhtml">
    <ui:define name="body">            
        <h:form id="itemForm">               
            <f:metadata>
                <f:viewParam name="id" value="#{listController.item.id}" />
            </f:metadata>

* {
  box-sizing: border-box;
}

.container {
  margin: 0 auto;
  width: 80%;
}

.row {
  width: 100%;
  margin: 10px;
  /*border: solid black 1px;*/
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  background-color: grey;
}

.column.one-half {
  width: 50%;
}

.column.one-fourth {
  width: 25%;
}

.column.one-eighth {
  width: 12.5%;
}

.offset-one-fourth {
  margin-left: 25%;
}

.offset-half {
  margin-left: 50%;
}

这是我运行它时发生的事情：

我试过弄乱了边距，宽度百分比，html的顺序，但似乎无济于事。

Answer 1

您似乎在错误地使用自己的课程！

无需插入额外的元素来应用偏移量-只需将偏移量类添加到偏移量之后的第一个元素 即可。

下面的CSS与问题中的CSS相同，只是为了节省空间而将其缩小。

*{box-sizing:border-box}.container{margin:0 auto;width:80%}.row{width:100%;margin:10px}.row:after{content:"";display:table;clear:both}.column{float:left;background-color:grey}.column.one-half{width:50%}.column.one-fourth{width:25%}.column.one-eighth{width:12.5%}.offset-one-fourth{margin-left:25%}.offset-half{margin-left:50%}

<div class=container>
  <div class="row">
    <div class="column one-half">1/2</div>
    <div class="column one-fourth">1/4</div>
    <div class="column one-eighth">1/8</div>
    <div class="column one-eighth">1/8</div>
  </div>
  <div class="row">
    <div class="column one-half offset-half">1/2</div>
  </div>
  <div class="row">
    <div class="column one-fourth offset-one-fourth">1/4</div>
    <div class="column one-fourth">1/4</div>
    <div class="column one-fourth">1/4</div>
  </div>
</div>