如何创建描述列表？

Question

text   1

text   text: 321
       text: 123

如何根据新标准创建此类工作表+响应式。 不使用浮点等？

这是我的选择。

Jsfiddle

但是我认为这不是最佳选择。

Answer 1

尝试grid layout：

.container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  height:90vh;
}
div:nth-child(1):not(.container){
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
div:nth-child(2){
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
div:nth-child(3){
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
div:nth-child(4){
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

<div class="container">
  <div>item</div>
  <div>1</div>
  <div>item</div>
  <div>
    <ul>Foo
    <li>item1</li>
    <li>item2</li>
    </ul>
  </div>
</div>