Question

我已经看到了一些关于这个问题的问题。试图解决，但无法找到如何做到这一点。

这是我的fiddle（到目前为止只针对移动视图执行的代码）。我的问题是 action_container 和 main_container 重叠。

HTML

<body>
<?php include('./includes/header.php'); ?>

<div id="greetings_container">
        <div id="greeting_line">Hi<br>Ayan,</div>
        <div id="meal_time"><span>Breakfast?</span></div>
        <div id="down_arrow"><i class="fa fa-angle-double-down fa-lg" aria-hidden="true"></i></div>
</div>

<div id="action_bar">
    <input type="button" id="cart" name="cart" value="Cart">
    <input type="button" id="filter" name="filter" value="Filter">
</div>
<div id="main_container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
</div>

</body>

CSS

@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait)
{
html, body
{
    height:100%;
    clear:both;
}
#greetings_container
{
   background-color: hsla(0,5%,52%,1.00);
   background-image: url(../images/bg1.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   width:100%;
   height:calc(100% - 65px);
   word-wrap:break-word;

}
#greeting_line
{
    text-align:center;
    color:#FFFFFF;
    font-size:78px;
    padding-top:20%;
    padding-left:20px;
    padding-right:20px;
    margin-bottom:25px;
}
#meal_time
{
    background-color: #ED734F;
    text-align:center;
    color:#FFFFFF;
    font-size:35px;
    border-radius:35px;
    margin-left:15%;
    margin-right:15%;
    word-wrap:break-word;
}
#down_arrow
{
    color:#FFFFFF;
    font-size:36px;
    text-align:center;
    position: absolute;
    bottom:20px;
    width:100%;
    -webkit-animation: transform-bounch 2500ms linear 1000ms infinite normal;
    -moz-animation: transform-bounch 2500ms linear 1000ms infinite normal;
    animation: transform-bounch 2500ms linear 1000ms infinite normal;
}
#action_bar
{
    background-color:#DFDBDB;
    color:#FFFFFF;
    clear:both;
}
#cart
{
    position:absolute;
    right:0;
    width:20%;
    height:10%;
    background-color:#20AC76;
    color:#FFFFFF;
    border:#1C9767 1px;
    font-size:18px;
}
#filter
{
    position:absolute;
    width:20%;
    height:10%;
    background-color:#20AC76;
    color:#FFFFFF;
    border:#1C9767 1px;
    font-size:18px;
}
#main_container
{
    width:100%;
    font-size:18px;
    /*margin-top:60px;*/
}

}

Answer 1

删除position:absolute和#cart上的#filter，然后在float: right上设置#cart

#cart
{
    /*position:absolute;*/
    right:0;
    width:20%;
    height:10%;
    background-color:#20AC76;
    color:#FFFFFF;
    padding: 10px;/*add this*/
    float: right;/*add this*/
    border:#1C9767 1px;
    font-size:18px;
}
#filter
{
    /*position:absolute;*/
    width:20%;
    height:10%;
    background-color:#20AC76;
    color:#FFFFFF;
    padding: 10px;/*add this*/
    border:#1C9767 1px;
    font-size:18px;
}

Answer 2

将两个div放在更大的div和样式位置中以嵌入块。所以做这样的事情：

<div style="position: inline-block;">
  <div id="action_bar">
  <input type="button" id="cart" name="cart" value="Cart">
  <input type="button" id="filter" name="filter" value="Filter">
  </div>
  <div id="main_container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class     aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos     himenaeos. Curabitur sodales ligula in libero.
  </div>
</div>

防止div的重叠

2 个答案: