Question

我对语义相当陌生。这可能是一个非常愚蠢的问题。

我正在努力创建一个响应/移动友好的五列网格布局。这是一张快速图像，显示了我想要做的事情。另外，对不起我生病的MS Paint技能：

计算机：

移动：

有什么想法吗？：）

Answer 1

我认为外部容器很简单。对于包含5个项目的Segment，您可以使用以下内容：

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet" />

<div class="ui container">

  <div class="ui one column centered grid">

    <div class="center aligned column" style="background-color: #B0C4DE;">
      Some Row
    </div>

    <div class="column">
      <div class="ui stackable five column grid">
        <div class="column" style="background-color: #FFF8DC;">Item 1</div>
        <div class="column" style="background-color: #F8F8FF;">Item 2</div>
        <div class="column" style="background-color: #FFF8DC;">Item 3</div>
        <div class="column" style="background-color: #F8F8FF;">Item 4</div>
        <div class="column" style="background-color: #FFF8DC;">Item 5</div>
      </div>
    </div>

    <div class="column" style="background-color: #E0FFFF;">
      New Row
    </div>

  </div>

</div>

＆＃13;

网格是你的朋友https://semantic-ui.com/collections/grid.html

Answer 2

我认为您忘记了Semantic UI中最好的部分之一。

https://semantic-ui.com/views/item.html

响应元素项目视图旨在响应移动分辨率下的图像堆叠。

你只需要将你的项目元素放在一个ui项目上，它就可以了。看这里：

<div class="ui items">
     <div class="item">
     <div class="item">
     <div class="item">
     <div class="item">
     <div class="item">
</div>

使用网格很酷，但你已经有了响应元素：）

和平

Answer 3

我有一个“index.html”和一个“style.css”来完成这个任务。 html看起来像这样（称之为“index.html”）：

<!DOCTYPE html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta charset="utf-8">
        <meta name="description" content="grid example for StackOverflow">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>  Grid Example - by Rob Blansett.
        </title>
    </head>
    <body>
        <div class="Container">
             <p>Container: Content should be horizontally centered.</p>
             <div class="Row" id="One">
                Row #1
             </div>
             <div class="Row" id="Two">
                Row #2
                 <div class="Segment">
                    <div class="SegmentText">
                        Segment
                    </div>
                    <div class="Item" id="Item1">
                         Item #1
                    </div>
                    <div class="Item" id="Item2">
                         Item #2
                    </div>
                    <div class="Item" id="Item3">
                         Item #3
                    </div>
                    <div class="Item" id="Item4">
                         Item #4
                    </div>
                    <div class="Item" id="Item5">
                         Item #5
                    </div>
                 </div>

             </div>
             <div class="Row" id="etc">
                Row ...
             </div>
        </div>
    </body>
</html>

“style.css”看起来像这样：

* {
    padding: 0;
    margin: 0;
}

div {
    display: block;
    padding: 1em; 
    margin: 1em;
    border-style: solid;
    position: relative;
}

div.Container {
    margin-left: 2%;
    margin-right: 2%
}

div.Row {
    background-color: grey;
}

div.Segment {
    background-color: lightgrey;
}

div.SegmentText {
    border-style: none;
} 

div.Item {
    background-color: darkgray;
}

/* If at least 500 pixels width is available then: */
@media (min-width:500px) {
    div {
        display: grid;
        grid-gap: 1em;
        padding: 1em; 
        margin: 0;
        border-style: solid;
        position: relative;
    }

    div.Container {
        margin-left: 10%;
        margin-right: 10%
    }

    div.Segment {
        display: grid;
        grid-template-columns: 1Fr 1Fr 1Fr;
    }

    div.SegmentText {
        grid-column: 1 / 4;
        border-style: none;
    } 
}

/* If at least 800 pixels width is available then: */
@media (min-width:800px) {
    div {
        display: grid;
        grid-gap: 1em;
        padding: 1em; 
        margin: 0;
        border-style: solid;
        position: relative;
    }

    div.Container {
        margin-left: 20%;
        margin-right: 20%
    }

    div.Segment {
        display: grid;
        grid-template-columns: 1Fr 1Fr 1Fr 1Fr 1Fr;
    }

    div.SegmentText {
        grid-column: 1 / 6; 
        border-style: none;
    } 
}

请注意，我已经为窗口宽度添加了@media查询。默认样式设置位于CSS的顶部，然后在下面是执行GRID内容的查询部分（如果有足够宽的窗口）。因此，如果可用的像素少于500像素，它将是一列，如果至少有800像素可用，它将是5列。我包括一个3列的中间尺寸 - 只是为了好玩。重新调整窗口大小，查看实际样式之间的调整。

这是工作副本的链接： http://technifusion.com/projects/web/grid-example-01.html

这只是想知道如何做到这一点。

注意：此解决方案不使用semantic-ui（原始海报要求），但此解决方案仍可以帮助那些不使用该框架的人。

Answer 4

我知道您想使用语义ui，但如果您不介意，也可以使用bootstrap4创建布局。

Bootstrap4 方法首先是移动设备，因此请创建您的html结构以适应移动设备，然后从那里进行扩展。

Bootstrap使用基于12列行的网格系统。您可以使用移动类 col-x ，中等宽度窗口的 col-md-x 定义每列的空间， col-lg-x < / em> for large。＆＃34; X＆＃34;定义 div 元素所采用的列数（x <= 12）。查看Bootstrap4 documentation。

请记住将相关的js库和css添加到您的html文件中。

检查此代码段：

＆＃13;
＆＃13;
#row-1{ background-color: orange; } #row-2{ background-color: yellow; } #row-3{ background-color: lightblue; }
＆＃13;
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script> <div class="container"> <div id="row-1" class="row"> <div class="col-12"> Row #1 </div> </div> <div id="row-2" class="row"> <div class="col-12 col-md-2"> Item 1 </div> <div class="col-12 col-md-2"> Item 2 </div> <div class="col-12 col-md-2"> Item 3 </div> <div class="col-12 col-md-2"> Item 4 </div> <div class="col-12 col-md-2"> Item 5 </div> <div class="col-12 col-md-2"> Item 6 </div> </div> <div id="row-3" class="row"> <div class="col-12"> Row #3 </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

构建一个简单的响应网格

4 个答案: