文章/答案/技术大牛

发布

社区首页 >问答首页 >设计div以正确对齐

问设计div以正确对齐
EN

Stack Overflow用户

提问于 2017-07-06 15:52:41

回答 1查看 47关注 0票数 2

我想我没有完全理解内嵌，阻止，浮动等，并希望得到一些帮助。我正在尝试实现这个设置：

这样做的目的是显示我们的客户使用的最常见的语言。我想有一个街区，有前5最常见，与最常见的得到一个聚光灯部分。然后列出下面剩下的语言。

然而，我的代码只是将所有东西都推到左边，让页面的其余部分(就像页脚一样)靠近它。我希望顶部语言和接下来的4是相邻的，在屏幕的中心，而不影响它下面的页面。

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;
}

<!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>

(你必须看到整页的片段才能看到这个问题。)

如果我想要更清洁的布局，我错过了什么？

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-06 16:12:24

在您的示例中，如果希望语言统计数据div出现在浮动的top-1和next-4元素下，只需将样式clear: left添加到语言状态。这将有效的线-打破它低于其他两个元素。

此外，您还需要将margin: 0px auto添加到顶部5div的样式中--这将相等地占用600 on宽元素的左右边距，并在页面上将其居中。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44953701

复制

相似问题

问设计div以正确对齐
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设计div以正确对齐EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设计div以正确对齐
EN