divの重複を防ぐ

この問題についていくつかの質問がありました。解決しようとするが、それを行う方法を見つけることができません。divの重複を防ぐ

ここは私の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;*/ 
} 

}

出典

2016-05-18 Ayan

にfloat: rightを設定まあ...はい、あなたは2つの絶対位置の要素を持っています。 –

なぜコメントアウトされたマージンを取り除くのはなぜですか？ https://jsfiddle.net/oks2cd45/1/ –

は#cartと#filterにposition:absoluteを削除し、その後#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; 
}

出典

2016-05-18 15:55:49

インラインブロックに大きな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>

出典

2016-05-18 15:51:12

答えて

関連する問題