0

我在页脚内水平定位 div 时遇到问题。我需要页脚内的 div 在它们之间具有相等的空间。

这是我到目前为止所做的

           #submitemail
         {

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

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


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

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

4

5 回答 5

3

这是一个使用示例display:inline-block;

JS小提琴

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，以便它仍然照顾孩子，

清除修复

IE8+

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

跨浏览器 Clearfix

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

于 2013-04-29T18:10:37.650 回答
1 
#footer div{
    width: 32%; 
    margin-left: 1%;
    float: left;
}

工作小提琴

于 2013-04-29T18:10:19.837 回答
1

所有的浮动都必须是左浮动：左；读这个

于 2013-04-29T18:08:08.983 回答
0

将您的 html 作为 #one,#two,#three 放入 ul,li 订单列表（我更新了您的 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/

于 2013-04-29T18:15:45.650 回答
0

我认为这就是你需要的:)

.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;
}
于 2013-04-29T18:19:45.480 回答