无法在div内右侧显示下载按钮

时间:2014-05-15 11:30:43

标签: html5 css3

这是我的HTML

<div id="under_post"> <!--START UNDER POST-->
            <div id="post_info"> <!--START POST INFO-->
                    <p><span style="color: #000000;display: block;float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut lectus sit amet quam gravida fermentum non a nibh. Praesent quam libero, dignissim vel luctus vel, sodales in justo</span></p>
            </div> <!--END POST INFO-->

            <div id="download_button"><!--START DOWNLOAD BUTTON -->
                        <a class="download" href="http://dl.dropbox.com/s/0iq6ik93rklbakh/Kirvy.zip">Download</a>            
            </div> <!--END DOWNLOAD BUTTON-->


 </div>

css如下

#under_post {
    margin: 0;
    padding: 0;
    width: 600px;
    border: 1px solid black;
}
#post_info {
    margin: 0;
    padding: 0;
    width: 400px;
}
div#download_button {
    width: 100px;
}
div#download_button a.download {
    display: block;
    text-decoration: none;
    color: white;
    padding-top: 10px;
    background-color: #e8432d;
    width: 100px;
    height: 30px;
    text-align: center;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    -khtml-border-radius: 7px;
}

我希望下载按钮与right div

下的#under_post侧对齐

这是我试图让它继续工作的页面的链接。

Link

提前致谢

1 个答案:

答案 0 :(得分:0)

float:left;添加到#under_post#post_info

#under_post {
margin: 0;
padding: 0;
width: 600px;
border: 1px solid black;
float: left;
}

#post_info {
margin: 0;
padding: 0;
width: 400px;
float: left;
}

并将float:right;margin-top:25px;添加到div#download_button

div#download_button {
width: 100px;
float: right;
margin-top: 25px;
}

这就是它的外观

enter image description here

相关问题