需要在页脚内并排放置 5 个 div答案

【问题标题】：need to place 5 divs side by side within footer需要在页脚内并排放置 5 个 div
【发布时间】：2016-05-23 07:04:11
【问题描述】：

嗨，我需要在页脚中并排放置 5 个 DIV，这 4 个 DIV 已经并排，但第 5 个 DIV 刚刚下降。

我试过浮动：左，显示：内联块，甚至增加了父DIV（页脚）的宽度，但第5个留在下面

代码如下：

CSS

#footer {
    width:1240px;
    padding:0px;
    margin:0px auto;
    background-image:url(../images/botm.jpg);
    background-repeat:repeat;
    background-position:center top;
}

.Aboutus {
    float:left;
    width:180px;
    background-image:url(../images/footer.jpg);
    background-position:right;
    background-repeat:no-repeat;
    text-align: left;
    margin-left: 15px;
    padding-top: 30px;
    padding-right: 10px;
    padding-left: 10px;
}

.ourblog {
    float:left;
    width:245px;
    min-height:246px;
    background-image:url(../images/footer.jpg);
    background-position:right;
    background-repeat:no-repeat;
    padding-top: 30px;
    padding-right: 10px;
    padding-left: 10px;
}

.joinnews {
    float:left;
    width:190px;
    min-height:246px;
    background-image:url(../images/footer.jpg);
    background-position:right;
    background-repeat:no-repeat;
    padding-top: 30px;
    padding-right: 20px;
    padding-left: 20px;
}

.contactus {
    float:left;
    width:200px;
    min-height:246px;
    color:#fff;
    padding-top: 30px;
    padding-left: 20px;
}

.Histats {
    float : left;
    width:50px;
    min-height:1px;
    color:#fff;
    padding-top: 30px;
    padding-left: 20px;
}

HTML

<div id="footer">
<div class="aboutus">
  ..code </div>
 <div class="ourblog">
  ..code </div>
  <div class="joinnews">
  ..code </div>
 <div class="contactus">
 ..code </div>
  <div class="Histats">
 ..code </div>

   </div>

【问题讨论】：

您是否可以创建一个小提琴或共享一个错误的工作链接？
等待它仍在本地主机中，但我可以编辑在线的
您在标记中将Aboutus 类大写，而在您的css 中全部小写。最佳做法是采用约定并坚持下去。我个人从不在变量或属性中使用大写字母。
更正了 aboutus 类，但当我创建它时仍然没有不同的奇怪想法 jsfiddle 它可以工作 jsfiddle.net/tvsoso1e 但不在我的网站上抱歉，我无法编辑在线网络，直到我让它在本地主机上工作

标签： html css

【解决方案1】：

HTML 与 CSS 中使用的 CSS class 不匹配。

您在 CSS 中使用了Aboutus，而在 html 中使用了aboutus，如下所示：

<div class="aboutus">
..code </div>

让它们都一样，你的 css 就可以工作了。

#footer {
    width:1240px;
    padding:0px;
    margin:0px auto;
    background-image:url(../images/botm.jpg);
    background-repeat:repeat;
    background-position:center top;
}

.aboutus {
    float:left;
    width:180px;
    background-image:url(../images/footer.jpg);
    background-position:right;
    background-repeat:no-repeat;
    text-align: left;
    margin-left: 15px;
    padding-top: 30px;
    padding-right: 10px;
    padding-left: 10px;
}

.ourblog {
    float:left;
    width:245px;
    min-height:246px;
    background-image:url(../images/footer.jpg);
    background-position:right;
    background-repeat:no-repeat;
    padding-top: 30px;
    padding-right: 10px;
    padding-left: 10px;
}

.joinnews {
    float:left;
    width:190px;
    min-height:246px;
    background-image:url(../images/footer.jpg);
    background-position:right;
    background-repeat:no-repeat;
    padding-top: 30px;
    padding-right: 20px;
    padding-left: 20px;
}

.contactus {
    float:left;
    width:200px;
    min-height:246px;
    color:#fff;
    padding-top: 30px;
    padding-left: 20px;
}

.histats {
    float : left;
    width:50px;
    min-height:1px;
    color:#fff;
    padding-top: 30px;
    padding-left: 20px;
}

<div id="footer">
<div class="aboutus">
  ..code </div>
 <div class="ourblog">
  ..code </div>
  <div class="joinnews">
  ..code </div>
 <div class="contactus">
 ..code </div>
  <div class="histats">
 ..code </div>

   </div>

【讨论】：

更正了 aboutus 类，但仍然没有什么不同
@Citra45Abadi 我已经更新了我的答案，你所有的 5 列都在一行中

【解决方案2】：

您可以使用display:flex。检查下面的 sn-p，这可能有助于开始。

#footer {
  display: flex;
  width: 1240px;
  padding: 0px;
  margin: 0px auto;
  background-image: url(../images/botm.jpg);
  background-repeat: repeat;
  background-position: center top;
}
.aboutus {
  width: 180px;
  background-image: url(../images/footer.jpg);
  background-position: right;
  background-repeat: no-repeat;
  text-align: left;
  margin-left: 15px;
  padding-top: 30px;
  padding-right: 10px;
  padding-left: 10px;
}
.ourblog {
  width: 245px;
  min-height: 246px;
  background-image: url(../images/footer.jpg);
  background-position: right;
  background-repeat: no-repeat;
  padding-top: 30px;
  padding-right: 10px;
  padding-left: 10px;
}
.joinnews {
  width: 190px;
  min-height: 246px;
  background-image: url(../images/footer.jpg);
  background-position: right;
  background-repeat: no-repeat;
  padding-top: 30px;
  padding-right: 20px;
  padding-left: 20px;
}
.contactus {
  width: 200px;
  min-height: 246px;
  padding-top: 30px;
  padding-left: 20px;
}
.histats {
  width: 50px;
  min-height: 1px;
  padding-top: 30px;
  padding-left: 20px;
}

<div id="footer">
  <div class="aboutus">
    ..aboutus
  </div>
  <div class="ourblog">
    ..ourblog
  </div>
  <div class="joinnews">
    ..joinnews
  </div>
  <div class="contactus">
    ..contactus
  </div>
  <div class="histats">
    ..histats
  </div>

</div>

【讨论】：

谢谢展示：flex；我不知道的作品

【解决方案3】：

对父 div 使用 display: flex。

这是解决您问题的Demo

【讨论】：

【解决方案4】：

尝试使 div 的宽度（包括 5 个 div）更大。可能是您的第 4 个 div 没有足够的空间，所以它下降了。

【讨论】：

【解决方案5】：

“关于我们”部分的类在 HTML 和 CSS 中不匹配

<div class="aboutus">
..code </div>

CSS:

.aboutus {}

在 HTML 和 CSS 中始终保持相同。

【讨论】：

【解决方案6】：

使用这个结构，并在.Histats & .contactus中添加float:right

<div id="footer">
 <div class="Histats">a</div>
 <div class="contactus">contact</div>
 <div class="Aboutus">about</div>
 <div class="ourblog">blog</div>
 <div class="joinnews">news</div><div class="clear"></div>
</div>

在 CSS 中添加：

.clear{clear: both;}

【讨论】：

【解决方案7】：

使用这个 -

用于页脚 - 用于代替 width:1240px;

宽度：100%；

并且在每个 div 中 - 除以 5，所以所有的都是 20%

宽度：20%；

希望这会奏效

【讨论】：