2

我正在尝试为我的网站制作页脚。

我希望 2 个 div 和一个列表内联在此页脚中。但这并没有发生。我使用了 CSS 的 CSS 属性display:inline-block。发生的情况是divs 对齐但list元素只是向下移动了一点。

这是 jsFiddle 链接：http: //jsfiddle.net/tw2Wp/2/。如果你看到 JSfiddle，你会发现三个带类footerContents的 div 没有对齐。

有人可以解释一下为什么会这样吗？使用这个东西是正确的inline-block还是有更好的方法（我确定有）？

4

4 回答 4

2

请添加vertical-align到.footerContents：

.footerContents {
    display: inline-block;
    width: 200px;
    height: 200px;
    padding: 5px;
    margin-top: 30px;
    margin-left: 50px;
    margin-bottom: 5px;
    background-color: red;
    vertical-align: top; /* <<< */
}

演示

于 2013-06-15T02:14:24.840 回答
1

你会使用 css3 flexbox 模块吗，像这样：

HTML

<div id="footer">
    <div class="footerContents">
       ...
     </div>

     <ul class="footerContents">
        ...
     </ul>

     <div class="footerContents">
        ...
     </div>
</div>
<div>Copyright © </div>

CSS

#footer {
  height:auto;
  width:100%;
  background-color:#666;
  background-image:url(footer_shade.png);
  background-repeat:no-repeat;
  background-position:50% 0;
  border-top:1px solid #FFF;
  color:#fff;
  font-family:'Bree Serif',serif;
  font-size:16px;
  line-height:20px;

  display:-moz-box;
  display:-webkit-box;
  display:-ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: justify; 
  -moz-box-pack: justify; 
  -ms-flex-pack: justify; 
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.footerContents {
  width:200px;
  height: 200px;
  padding:5px;
  margin-top: 30px;
  margin: 20px;
  margin-bottom: 5px;
  background-color: red;

  -moz-flex-box:1;
  -webkit-flex-box:1;
  -ms-flex:1 1 200px;
  -webkit-flex: 1 1 200px;
  flex:1 1 200px;
}

请查看演示。还有一些关于 flexbox 的内容，如果你想了解，请点击这里和这里。

于 2013-06-15T02:56:38.203 回答
0

一个解决方案是浮动元素而不是使用inline-block，请参阅此处的工作示例：http: //jsfiddle.net/tw2Wp/2/

请注意，我还在该类中添加了一个额外的 div clear，它将清除浮动。通过这样做，您的背景将再次出现。由于浮动元素，父 div 不知道它应该有多大（所以它的高度为 0）。

.clear{
    clear:both;
}
于 2013-06-15T02:13:32.407 回答
0

你可以这样做：

HTML

<div id="footer">
    <div class="footerContents">
       ...
     </div>

     <ul class="footerContents">
        ...
     </ul>

     <div class="footerContents">
        ...
     </div>
</div>
<div>Copyright © </div>

CSS

#footer {
  height:auto;
  width:100%;
  background-color:#666;
  background-image:url(footer_shade.png);
  background-repeat:no-repeat;
  background-position:50% 0;
  border-top:1px solid #FFF;
  color:#fff;
  font-family:'Bree Serif',serif;
  font-size:16px;
  line-height:20px;
  **white-space: nowrap;**
}

.footerContents {
  display:inline-block;
  width:200px;
  height: 200px;
  padding:5px;
  margin-top: 30px;
  margin-left: 50px;
  margin-bottom: 5px;
  background-color: red;
  **vertical-align: top;
  white-space: normal;**
}

请查看新的演示。

于 2013-06-15T03:06:46.563 回答