Question

有没有办法让一行中的列大小相同？我希望我的十个宽柱与六个宽柱的高度相同。代码如下。

<div class="ui grid">
    <div class="row">
        <div class="ten wide column">
            <div class="ui segment purple inverted">
                Text
                <img class="ui fluid image" src="{{ asset('/img/pic1.jpg') }}">
            </div>
        </div>
        <div class="six wide column">
            <div class="ui segment purple inverted">
                Text
                <div class="row">
                    <img class="ui centered image" src="{{ asset('/img/pic2.jpg') }}">
                </div>
                <div class="row">
                    <img class="ui centered image" src="{{ asset('/img/pic3.jpg') }}">
                </div>
            </div>
        </div>
     </div>
</div>

Answer 1

语义2.0以后这是stretched。

<div class="ui three column stretched grid">
 <div class='column'>
   A
 </div> 
 <div class='column'>
   B
 </div> 
 <div class='column'>
   C
 </div> 
</div>

Answer 2

与Equal Width Columns一样，您可以使用equal height grid来实现此目的：

<div class="ui equal height grid">
    <div class="row">
        <div class="ten wide purple column">Text</div>
        <div class="six wide red column">
            <div class="row">Text</div>
            <div class="row">Text</div>
            <div class="row">Text</div>
            <div class="row">Text</div>
        </div>
    </div>
</div>

http://jsfiddle.net/pq1oka3n/1/

网格列高度

2 个答案: