Question

我是semantic ui的新用户，希望拥有this kind of layout。在semantic ui's documentation中，我能够找到相同但却无法完全正确的内容。

这是HTML

<div class="ui celled grid container">
  <div class="row stretched equal width">
    <div class="column">
      <div class="ui segment">
        13
      </div>
    </div>
    <div class="column">
      <div class="ui segment">
        1
      </div>
      <div class="ui segment">
        2
      </div>
    </div>
    <div class="column">
      <div class="ui segment">
        1
      </div>
      <div class="ui segment">
        2
      </div>
      <div class="ui segment">
        3
      </div>
    </div>
  </div>
</div>

Here's a JSFiddle

在纯HTML中，我能够这样做：

<table border="1" width="100%">
  <tr>
    <td rowspan="2">13</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>

Here's a JSFiddle

我如何使用语义ui实现此布局？

Answer 1

<强>更新：

根据OP的要求使用CGImage进行响应式设计，修改后的JS小提琴：https://jsfiddle.net/batrasoe/4k508w9p/

您需要手动覆盖extension UIImage { func cropping(to rect: CGRect) -> UIImage { UIGraphicsBeginImageContextWithOptions(rect.size, false, self.scale) self.draw(in: CGRect(x: -rect.origin.x, y: -rect.origin.y, width: self.size.width, height: self.size.height)) let croppedImage = UIGraphicsGetImageFromCurrentImageContext()! UIGraphicsEndImageContext() return croppedImage } }属性。

无响应方式：

您可以使用table collection类修改HTML代码

https://jsfiddle.net/batrasoe/o09mL8kn/1/

div

语义UI rowspan布局

1 个答案: