时间戳

首页 > 解决方案 > 使用 CSS 对两行中的元素进行排序

html - 使用 CSS 对两行中的元素进行排序

问题描述

我正在自定义 Magento 1.9 付款方式选择器。它呈现一个 dl 列表，其中 dt 元素具有方法名称，而 dd 元素具有方法信息。我想在第一行并排渲染所有 dt 元素，在第二行渲染 dd 方法。我尝试制作 dl flex 并在 dt 和 dd 元素上使用 order，但没有成功。

<dl id="checkout-payment-method">
   <dt id="dt_method_1"></dt>
   <dd id="dd_method_1"></dd>
   <dt id="dt_method_2"></dt>
   <dd id="dd_method_2"></dd>
   <dt id="dt_method_3"></dt>
   <dd id="dd_method_3"></dd>
</dl>

标签： htmlcssmagento

解决方案

因此，虽然我不建议否定显式语义层次结构，但您确实有一些 hacky 选项，例如：

#checkout-payment-method {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#checkout-payment-method dt, #checkout-payment-method dd {  
  margin: 0;
  width: 33%;
}

#checkout-payment-method dt {
  border: red 1px solid;
  order: 1
}

#checkout-payment-method dd {
  border: green 1px solid;
  order: 2
}
<dl id="checkout-payment-method">
   <dt id="dt_method_1">dt1</dt>
   <dd id="dd_method_1">dd1</dd>
   <dt id="dt_method_2">dt2</dt>
   <dd id="dd_method_2">dd2</dd>
   <dt id="dt_method_3">dt3</dt>
   <dd id="dd_method_3">dd3</dd>
</dl>

希望这会有所帮助，干杯！

推荐阅读