页脚正确对齐答案

【问题标题】：proper alignment of footer页脚正确对齐
【发布时间】：2013-09-05 23:26:01
【问题描述】：

   <div id="footer">
    <div class="row">
        <div class="span5">
            <img src="../goyal/webdesign.jpg" class="verisign-image"></div> 
                I am a  
                <select style="width:10%;" class="dropup">
                      <option value="select">--select--</option>
                      <option value="Business">Business</option>
                      <option value="Indivisual">Indivisual</option>
                </select>

                <button class="btn dropdown-toggle btn-Warning" style="margin-top:-1%;">Go!
                </button>   

                <div class="span5" style="float:right;">
                <div class="footer-feedback">
                    <p class="left">Add & claim your business link|
                        <a href="">link1</a>|
                        <a href="">link2</a>
                    </p>
                    <span class="footer-feedback">
                        <h5>Feedback</h5>
                    </span>
                </div>
            </div><!--span5 --> 
        </div><!--span5 -->
    </div><!-- row -->
</div>

css:

div#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#eee;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
span.footer-feedback{

color:#fff;
float:right;
width:80px;
height:100%;
background:green;
}
 p.left {
    text-align:left;
    float:left;
}

 p.right {

    float:right;
    text-align:right;
}

我希望在我的页脚中正确对齐。比如绿色区域中间的反馈。和绿色的左侧是我想要这个文本“添加并声明您的业务链接|链接2|链接3” 在中间“我是一个，选择并走” 橙色的去按钮。我的页脚是固定的

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

这里是fiddle link

HTML

<div id="footer">
        <div class="row">
            <div class="span5"><img src="../goyal/webdesign.jpg" class="verisign-image"></div> 
            <div class="orange">
                I am a  
                <select class="dropup">
                    <option value="select">--select--</option>
                    <option value="Business">Business</option>
                    <option value="Indivisual">Indivisual</option>
                </select>

                <button class="btn dropdown-toggle btn-Warning" style="margin-top:-1%;">Go!</button>   
            </div> 
            <p class="left">Add & claim your business link|
                <a href="">link1</a>|
                <a href="">link2</a>
            </p>
            <div class="span5" style="float:right;">
                <div class="footer-feedback">

                    <span class="footer-feedback">
                        <h5>Feedback</h5>
                    </span>
                </div>
            </div><!--span5 --> 
        </div><!--span5 -->
    </div>

CSS

div#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   /*height:30px;*/
   width:100%;
   background:#eee;
   text-align:center;
   padding:5px 0;
}
select.dropup {
    width:200px;
    }
/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
span.footer-feedback{
color:#fff;
float:right;
width:80px;
height:100%;
background:green;
text-align:center;
}
 p.left {
    display:inline-block;
}

 p.right {

    float:right;
    text-align:right;
}
.orange {
    /*background-color:#ff9a2e;
    overflow:hidden;
    height:100%;*/
    float:left;
    width:auto;
    }

【讨论】：

【解决方案2】：

只需替换你的 Css 这个 Css

div#footer {
   position: fixed;
    left: 0px;
    bottom: 0px;
    /*height: 30px;*/
    width: 100%;
    background: #eee;
}

只需从 'dif#footer' 标记中删除高度元素。

【讨论】：