我这里只是学习记录,参考文档更加生动https://zijieke.com/semantic-ui/elements/container.php#/introduction
容器
容器是一个元素,可以根据用户屏幕的大小将页面元素包含到合理的最大宽度。
一个标准的容器
<div class="ui container">
<p></p>
</div>
文本容器
可以降低其最大宽度更自然地容纳一列文本
<div class="ui text container">
</div>
文本对齐
<div class="ui left aligned container">
<p>left aligned</p>
</div>
<div class="ui center aligned container">
<p>center aligned</p>
</div>
<div class="ui right aligned container">
<p>right aligned</p>
</div>
<div class="ui justified container">
<p>justified</p>
</div>
流式
<div class="ui fluid container">
Fluid
</div>
Divider分割条
<div class="ui divider"></div>
Vertical Divider垂直分割条
只能1:1的左右分割
<div class="ui segment">
<div class="ui two column grid">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
</div>
<div class="ui vertical divider">and</div>
</div>
Horizontal Divider水平分割线
可以icon与文字居中出现
<h4 class="ui horizontal divider header">
<i class="tag icon"></i>
描述
</h4>
Inverted反色
让分割线的颜色反过来
Fitted填满
分割线不会具有margin效果,文字排版不受影响
<div class="ui segment">
p1
<div class="ui fitted divider"></div>
p2
</div>
hidden隐藏
分割线可以隐藏
section段落
分割线可以用来更好的分割段落间距
Clearing擦除
分割线可以清除它上方的内容。