DEMO

Question

我遇到浮动财产问题。

我的代码：JSFiddle

我希望它看起来像这样：printscreen

我能做什么，我希望按钮不会像按钮上方的其他两个元素那样浮动。

我的css :(你可以在JSFiddle上看到我的HTML）

#upload_photo_form > p {
    margin: 3px;
}

#upload_one {
    width: 150px;
    height: 60px;
    background-image: url('image, doesnt matter, looke the same anyways');
    background-size: 100%;
    float: left;
    border: 1px solid grey;
    border-radius: 3px;
}

#upload_two {
    margin-left: 5px;
    width: 150px;
    height: 60px;
    background-image: url('image, doesnt matter, looke the same anyways');
    border: 1px solid grey;
    border-radius: 3px;
    background-size: 100%;
    float: left;
}

Answer 1

您可以按如下方式修改代码：

<div id="upload_photo_form">
    <div>
        <p>Please choose a file to upload.</p>
        <input id="upload_file" type="file" /><br>
   </div>
   <div>
        <p>Which mode would you like to use?</p>
        <div id="upload_one"></div>
        <div id="upload_two"></div>
   </div>

</div>
 <div style="clear:both;"></div>
 <button id="upload_button">Upload</button>

Answer 2

试试这个：

#upload_button{
    margin-top:10px;
    clear: both;
}

DEMO

您也可以使用：

display: block;

Answer 3

如果您只想使用CSS执行此操作：

#upload_photo_form div {overflow: hidden}
#upload_button {clear: both; margin-top: 10px;}

CSS浮动问题

3 个答案:

DEMO