位置3在页脚内水平划分

Question

我在将div放在我的页脚内部时遇到了问题。我需要页脚内的div才能在它们之间留出相等的空间。

这是我到目前为止所做的事情

           #submitemail
         {

         float:right;
         margin-right: 280px;
       }
      .footerinfo3
      {

          float: left;
       margin-right: 280px;
      }
      .footerinfo1
      {


       float: left;
       margin-right: 280px;
      }

这是其余的代码 http://jsfiddle.net/U3RXD/

Answer 1

以下是使用display:inline-block;

的示例

JS Fiddle

footer{
    width:100%;
    background:#EEEEEE;
    height:400px;
    text-align:center;
}

footer div{
    width:30%;
    height:90%;
    margin:2.5% 0 2.5%  0;
    background:white;
    display:inline-block;
}  

<footer>
   <div></div>
   <div></div>
   <div></div>
</footer>

请注意，如果您决定在所有其他答案中使用float:left;，则可能需要在父容器中添加一个clearfix，以便它仍然可以照顾孩子，

Clearfix

IE8 +

.group:after {
  content: "";
  display: table;
  clear: both;
}

跨浏览器清除

http://css-tricks.com/snippets/css/clear-fix/

Answer 2

所有浮动必须保持浮动：左; read this

Answer 3

#footer div{
    width: 32%; 
    margin-left: 1%;
    float: left;
}

Working fiddle

Answer 4

将你的html列为ul，li命令列表为＃one，＃two，＃three（我更新了你的html，css代码）

HTML

<div id="footer">
        <div class="divwrapper">
            <ul>
                <li id="one">
                    <div class="footerinfo1">
                         <h1>Contact</h1>

                        <p>Company Name
                            <br>720 Fifth Avenue
                            <br>New York NY,10019
                            <br>USA</p>
                    </div>
                </li>
                <li id="two">
                    <div class="footerinfo3">
                         <h1>Contact</h1>

                        <p>Company Name
                            <br>720 Fifth Avenue
                            <br>New York NY,10019
                            <br>USA</p>
                    </div>
                </li>
                <li id="three">
                    <div class="dark">
                        <form id="submitemail">
                             <h1>Subscribe</h1>

                            <div class="dark"> <span><input type="text" class="check" placeholder="Please enter your email....">  
                    <input id="submit" type="submit" value="Submit"></span>

                            </div </form>
                    </div>
        </div>
    </div>
    </li>
    </ul>
    </div>
    </div>

CSS

#one, #two, #three {
    display:block;
    float:left;
    width:33%;
}

JS演示

http://jsfiddle.net/U3RXD/3/

Answer 5

我认为这就是你所需要的：）

.divwrapper {
margin:auto 0;
margin-bottom: 400px;
width: 100%;
}

 #footer {
padding-left: 10px;
    background-repeat: repeat-x;
    background-image:url("../images/footer.png") ; 
    position: relative;
margin-top: -214px; /* negative value of footer height */
height: 214px;
clear:both;
    width: 100%;

 }

 .textcontent
{
padding-top: 20px;
float:left;
text-align: justify;
padding-bottom: 20px;
}
 #submitemail
{

float:right;
margin-right: 280px;
}
.footerinfo1,
.footerinfo3,
.dark {
 float: left;
 }
.footerinfo1,
.footerinfo3 {
margin-right: 50px;
}