Question

我有一个包含2列的网格。在第一列中，我有1个凸起的段，在第二列中，我有2个凸起的段。显然，第二列会更大。我需要第一列中的片段占据全高。有什么想法吗？

谢谢！

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.js"></script>
<link href="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />

<div class="ui padded grid">
  <div class="eight wide column">
    <div class="ui raised segment">
      <h3>Header 1</h3>
      <i>Select all that apply</i>
      <br />
      <br />
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="id1" name="id1" value="1" tabindex="0" />
          <label>Information about widgets</label>
        </div>
      </div>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="id2" name="id2" value="1" tabindex="0" />
          <label>Additional information about widgets</label>
        </div>
      </div>
    </div>
  </div>
  <div id="extraColumn" class="eight wide column">
    <div class="ui raised segment">
      <h3>Question 1</h3>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="content_1" name="content_1" value="1" tabindex="0" />
          <label>Include Sprockets</label>
        </div>
      </div>
    </div>
    <div class="ui raised segment">
      <h3>QUestion 2</h3>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="content_2" name="content_2" value="1" tabindex="0" />
          <label>Don't include sprockets</label>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

使用语义UI CSS Flexbox，并以某种方式声明grid，以便相邻列的高度匹配。因此，您需要做的就是确保左侧segment的高度为100％，以填满column的整个高度。

<强>结果：

<div class="ui raised segment" style="height:100%;">

<强>段：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.js"></script>
<link href="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />

<div class="ui padded grid">
  <div class="eight wide column">
    <div class="ui raised segment" style="height:100%;">
      <h3>Header 1</h3>
      <i>Select all that apply</i>
      <br />
      <br />
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="id1" name="id1" value="1" tabindex="0" />
          <label>Information about widgets</label>
        </div>
      </div>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="id2" name="id2" value="1" tabindex="0" />
          <label>Additional information about widgets</label>
        </div>
      </div>
    </div>
  </div>
  <div id="extraColumn" class="eight wide column">
    <div class="ui raised segment">
      <h3>Question 1</h3>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="content_1" name="content_1" value="1" tabindex="0" />
          <label>Include Sprockets</label>
        </div>
      </div>
    </div>
    <div class="ui raised segment">
      <h3>QUestion 2</h3>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="content_2" name="content_2" value="1" tabindex="0" />
          <label>Don't include sprockets</label>
        </div>
      </div>
    </div>
  </div>
</div>

分段内部到网格列

1 个答案: