Question

我遇到了一些我以前从未见过的东西，我找不到任何关于如何解决它的事情，而且我已经搜索了两天。

我有一个包装器。在包装器中，有三个div（new_initiatives，logo和options）和一个底层（btns），包装器结束。粘性页脚位于包装器下方，并使用flex作为页脚中的列表项。

在btns div中，我有十二个按钮，我想要显示两行，我希望按钮展开以占用可用空间。没问题，我以前做过。但是，按钮的作用就像我在页面上居中了一个div。当我在按钮的右侧添加边距或填充时，它会将一个按钮向下移动到另一行。

我没有居中div，因为它是包装div的100％。唯一的中心div是徽标。我只是想用保证金来分隔按钮。我甚至尝试使用表格，它做了同样的事情。

CSS中可能有些东西，但我现在找不到它。我正在发布我的CSS，但我必须擦除HTML以发布它。如果我应该这样做，请告诉我。还让我知道我错过了什么。

html,
body {
  height: 100%;
  margin: 0;
}

p,
td,
li,
div {
  font: .95em/1.25em verdana, "sans serif";
}

h1 {
  font: bold small-caps 1.5em verdana, "sans serif";
  padding: .05em 0 .25em 0;
  color: #1349B3;
}

h2 {
  font: bold small-caps 1em verdana, "sans serif";
  padding: .05em 0 .25em 0;
  color: #1349B3;
}

#wrapper {
  width: 95%;
  margin: auto;
  min-height: 100%;
}

body>#wrapper {
  height: auto;
  min-height: 100%;
}

.footer {
  height: 160px;
  width: 95%;
  margin-top: -160px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-color: #fff;
  border-top: 2px solid red;
}

#initiatives {
  width: 23%;
  position: relative;
  top: 30px;
  left: 2px;
  float: left;
  padding: 10px;
  height: 410px;
  overflow-y: scroll;
  background-color: #FFFB41;
}

#logo {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  margin: auto;
  width: 45%;
  height: auto;
}

#option {
  width: 23%;
  position: relative;
  float: right;
  top: 30px;
  right: 2px;
  padding: 10px;
  height: 410px;
  overflow-y: scroll;
  background-color: #B3DEFF;
}

.logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#btns {
  width: 100%;
  position: relative;
  top: 475px;
  height: 300px;
  padding-top: 10px;
}


/*#btns img {
margin-right: 50px;
}*/

.footer ul {
  display: flex;
  list-style: none;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  width: 600px;
  margin: 10px auto;
  align-items: center;
}

.footer ul li {
  flex-basis: 25%;
  margin: 0 0 5px 0;
}

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="toolbox.css">
<title>Title</title>
</head>
<body>
<div id="wrapper">


<div id="initiatives">
<h1>New initiatives</h1>
</div>

<div id="logo">
<img class="logo" src="images/elect_eng_toolbox.png" />
</div>

<div id="option">
<h1>Options</h1>
</div>

<div id="btns">

<div style="width: 100%; margin: 5px auto;">
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
</div>

<div style="width: 100%; margin: 5px auto;">
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
</div>

</div>


</div>

<div class="footer">

<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>

</ul>

&copy Copyright 2017 Southern Company
</div>

</body>
</html>

感谢。

Answer 1

你需要通过向#btns css添加clear来清除你的花车：或者在#option下创建一个style =“clear：both”的空div，但仍然高于#btns。

清除花车很难解释，但这里有一个链接https://css-tricks.com/the-how-and-why-of-clearing-floats/

Answer 2

主要问题是top:475上的#btn这迫使按钮位于浮动的两个div的范围内。您还需要清除按钮上方和下方的text-align: center #btn

看我的小提琴：https://jsfiddle.net/agqnqdL7/1/

图像以自身为中心

2 个答案: