Question

我想我并不完全理解内联，阻止，漂浮等等，并希望得到一些帮助。我试图实现这个设置：

我们的想法是展示客户使用的最常用语言。我希望有一个最常见的前5个区块，最常见的是获得聚光灯区域。然后只列出下面的其他语言。

但是，我的代码只是向左推动所有内容，然后将页面的其余部分（如页脚）放在旁边。我希望顶级语言和下一个4在屏幕中央彼此相邻，而不会影响它下面的页面。

＆＃13;

body {
    font-family: Arial;
    transition: all ease .5s;
    text-align: center;
    color: rgb(58,58,58);
}

#footer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #666;
}

#footer li {
    float: left;
}

#footer li p {
    display: block;
    color: #555;
    text-align: center;
    padding: 7px 16px;
}

br {
    display: block;
}

#footer li a {
    display: block;
    color: #555;
    text-align: center;
    text-decoration: none;
}

#footer li a:hover {
    display: block;
    color: #555;
    text-align: center;
    text-decoration: underline;
}

#language-stats li {
    display: inline-block;
    padding: 13px;
    margin: 6px;
    border-radius: 5px;
    color: rgb(58,58,58);
    background-color: rgb(210,210,210);
    font-weight: bold;
}

#top-5 {
  width: 600px;
}

#top-1 {
  float: left;
  width: 250px;
  height: 300px;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  text-align: center;
}

#next-4 {
  float: left;
  width: 350px;
  height: 300px;
  background-color: #f5f5f5;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
</head>

  <div id="languages">
    
    <div id="top-5">
      <h3>Top Languages</h3>
      
      <div id="top-1">
        <svg height="70" width="60">
          <circle cx="30" cy="40" r="30" fill="#CECECE" />
          <text x="18" y="53" style="font-size: 40;
                                     stroke: #fff;
                                     fill: #fff">1</text>
        </svg>
      </div>
      <div id="next-4">
        <ul>
          <li>2: Example</li>
          <li>3: Example</li>
          <li>4: Example</li>
          <li>5: Example</li>
        </ul>
      </div>
    </div>
    
    <div id="language-stats">
      <h3>Language Stats</h3>
      <ul id="language-stats-list">
        <li>Languages Represented: 37</li>
        <li>Coolest Language: Example</li>
      </ul>
    </div>
    
  </div>
  <br />
  <hr />
  <div id="footer">
    <ul>
        <li><p><a href="#">Download CSV</a></p></li>
        <li><p><a href="#">Link to dictionary</a></p></li>
    </ul>
  </div>
</body>
</html>

＆＃13;

（您必须在整页中看到该片段才能见证此问题。）

我想要更清洁的布局，我缺少什么？

Answer 1

在您的示例中，如果您希望 language-stats div显示在浮动的 top-1 和 next-4 下元素，您只需要将样式clear: left添加到language-stats。这将有效地将其划分为低于其他两个元素。

此外，您需要将margin: 0px auto添加到 top-5 div的样式中 - 这将同样区分600px宽元素和中心的左右边距它在页面上。

样式div正确对齐

1 个答案: