Question

我正在学习语义框架，目前我正在使用细分。我的代码如下所示：

<!DOCTYPE html>
<html>
<head>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<link rel="stylesheet"
    href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
<script
    src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
<title>Assignments</title>
<style>
    .raised.segment{
        margin: 1.5%;
        width: 30%;
        display: inline-block;
        float: left;
    }
    h3 {
        display: inline-block;
        text-align: center;
    }
</style>
</head>
<body>


 <div class="ui raised segment">
<h2 class="ui header">
  Section 6
</h2>
 <div class="ui middle aligned selection list">
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
    <div class="content">
      <h3 class="ui header"> Vasil Pkhakadze </h3>
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
</div>
 </div>

  <div class="ui raised segment">
<h2 class="ui header">
  Section 6
</h2>
 <div class="ui middle aligned selection list">
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
    <div class="content">
      <h3 class="ui header"> Vasil Pkhakadze </h3>
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
</div>
 </div>

  <div class="ui raised segment">
<h2 class="ui header">
  Section 6
</h2>
 <div class="ui middle aligned selection list">
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
    <div class="content">
      <h3 class="ui header"> Vasil Pkhakadze </h3>
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
</div>
 </div>

  <div class="ui raised segment">
<h2 class="ui header">
  Section 6
</h2>
 <div class="ui middle aligned selection list">
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
    <div class="content">
      <h3 class="ui header"> Vasil Pkhakadze </h3>
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
</div>
 </div>
</body>
</html>

除第一段外，一切都很好。 float：left属性忽略其边距，因此第一个段触及边框。其他细分也很好。有什么建议吗？

Answer 1

semantic.min.css

中的.ui.segment:first-child{margin-top: 0;}类

有margin-top：0;从而使其触摸边框，用自定义css覆盖它

为此规则添加重要标记

CSS

.raised.segment{
        margin: 1.5% !important;
        width: 30%;
        display: inline-block;
        float: left;
    }

一切都应该正常工作

Link For reference

希望这会有所帮助..

浮动属性忽略边距

1 个答案: