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

Question

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

我试过浮动：左，显示：内联块，甚至增加父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;
}

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>

Answer 1

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

您在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>

Answer 2

您可以使用<uses-permission android:name="android.permission.INTERNET"/> <application android:name="utils.AppController" android:allowBackup="true" android:icon="@mipmap/ic_launcher" 。请查看下面的代码段，这可能有助于您开始使用。

display:flex

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

Answer 3

将display: flex用于父div。

这是您的问题的工作Demo

Answer 4

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

Answer 5

你的班级＆＃34; aboutus＆＃34; section与HTML和CSS不匹配

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

CSS:

.aboutus {}

始终在HTML和CSS中使两者相同。

Answer 6

使用此 -

页脚 - 用于代替宽度：1240px;

宽度：100％;

并且在每个div中 - 除以5，所有

将为20％

宽度：20％;

希望这会有用

Answer 7

使用此结构，并在.Histats & .contactus

中添加<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>

.clear{clear: both;}

在 CSS：

中添加此内容

sth