如何将语义ui项放入html中的段？

Question

我想把每个语义ui item放入一个segment.什么是在语义ui/html中执行此操作的正确方法？我应该放在item里面segment,segment里面item还是不放？

项目

物品代码:

<div class="ui divided items">
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/image.png">
    </div>
    <div class="content">
      <a class="header">12 Years a Slave</a>
      <div class="meta">
        <span class="cinema">Union Square 14</span>
      </div>
      <div class="description">
        <p></p>
      </div>
      <div class="extra">
        <div class="ui label">IMAX</div>
        <div class="ui label"><i class="globe icon"></i> Additional Languages</div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/image.png">
    </div>
    <div class="content">
      <a class="header">My Neighbor Totoro</a>
      <div class="meta">
        <span class="cinema">IFC Cinema</span>
      </div>
      <div class="description">
        <p></p>
      </div>
      <div class="extra">
        <div class="ui right floated primary button">
          Buy tickets
          <i class="right chevron icon"></i>
        </div>
        <div class="ui label">Limited</div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/image.png">
    </div>
    <div class="content">
      <a class="header">Watchmen</a>
      <div class="meta">
        <span class="cinema">IFC</span>
      </div>
      <div class="description">
        <p></p>
      </div>
      <div class="extra">
        <div class="ui right floated primary button">
          Buy tickets
          <i class="right chevron icon"></i>
        </div>
      </div>
    </div>
  </div>
</div>

分割:

细分代码:

<div class="ui segment">
</div>

Answer 1

语义UI Items和Segments不设计为一起工作(我只是碰到了同样的问题),所以我的解决方法是必要的CSS添加到应用到我的样式表.ui.segment.item元素(你也可以把这个到SCSS模板和使用颜色SCSS变量,间距等,而不是将其编译为您的网站的语义ui的自定义构建.

那么你可以将两种样式.item和.segment样式应用于那些你想拥有两种样式的块(对于任何变体,如piled或者compact,你当然也必须将这些变体包括为自定义样式).

我是这样做的,因为一个段的样式是相当自包含的,但是一个项目的样式非常广泛,因此它们将更难以准确地再现.

内置的代码运行器似乎没有正确显示,所以这里是一个相同的代码正常工作的小提琴:https://jsfiddle.net/nw8nte4b/

```

.ui.segment.item {
  position: relative;
  background: #fff;
  box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
  margin: 1rem 0;
  padding: 1em;
  border-radius: 0.25rem;
  border: 1px solid rgba(34, 36, 38, 0.15);
}

<link href="https://oss.maxcdn.com/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet" />

<div class="ui centered padded grid">
  <div class="ten wide column">

    <div class="ui items">
      <div class="ui item segment">
        <div class="image">
          <img src="http://semantic-ui.com/images/wireframe/image.png">
        </div>
        <div class="content">
          <a class="header">12 Years a Slave</a>
          <div class="meta">
            <span class="cinema">Union Square 14</span>
          </div>
          <div class="description">
            <p></p>
          </div>
          <div class="extra">
            <div class="ui label">IMAX</div>
            <div class="ui label"><i class="globe icon"></i> Additional Languages</div>
          </div>
        </div>
      </div>
      <div class="ui item segment">
        <div class="image">
          <img src="http://semantic-ui.com/images/wireframe/image.png">
        </div>
        <div class="content">
          <a class="header">My Neighbor Totoro</a>
          <div class="meta">
            <span class="cinema">IFC Cinema</span>
          </div>
          <div class="description">
            <p></p>
          </div>
          <div class="extra">
            <div class="ui right floated primary button">
              Buy tickets
              <i class="right chevron icon"></i>
            </div>
            <div class="ui label">Limited</div>
          </div>
        </div>
      </div>
      <div class="ui item segment">
        <div class="image">
          <img src="http://semantic-ui.com/images/wireframe/image.png">
        </div>
        <div class="content">
          <a class="header">Watchmen</a>
          <div class="meta">
            <span class="cinema">IFC</span>
          </div>
          <div class="description">
            <p></p>
          </div>
          <div class="extra">
            <div class="ui right floated primary button">
              Buy tickets
              <i class="right chevron icon"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

```