html - 防止div重叠-6ren

html - 防止div重叠

转载作者：太空宇宙更新时间：2023-11-03 22:58:40

25

4

我看到了一些关于这个问题的问题。试图解决但无法找到解决方法。

这是我的 fiddle (到目前为止完成的代码仅适用于移动 View )。我的问题是 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;*/
}

}

最佳答案

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

#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;
}

关于html - 防止div重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37304332/

25

4

0

文章推荐： node.js - Dialogflow Messenger 推荐

文章推荐： c++ - 自适应双边滤波器以保留边缘

文章推荐： javascript - 使用javascript动态切换类

文章推荐： c# - Http.HttpRequestException Xamarin 表单

php - 防止/限制方法继承
我有一个应用程序，其中许多对象都扩展了一个抽象类，该抽象类定义了诸如 create() edit() retrieve() 和 delete()。由于每个子类对这些函数使用相同的逻辑，抽象类定义了默认
angularjs - 防止$anchorScroll修改url
我正在使用$anchorScroll滚动到页面顶部，其中 html 元素具有 ID #brand。 AngularJS 代码: $location.hash(
Silverlight - 防止 OOB
我想停用我的应用程序中的右键单击，该右键单击提供了在桌面上安装应用程序的选项。我该如何做这样的事情？最佳答案右键单击 Visual Studio 中的项目并选择属性。那里有一个复选框“启用浏览器运
jquery - 防止:hover
我使用 jquery 定位 div，在我的 CSS 中我有一个 div.right-sm:hover{background-color: blue} 我想使用 jquery 停止悬停: $(this
jquery - 防止 'caret'跳转焦点
所以，我正在尝试复制 html5“占位符”属性功能。我目前坚持的一件事是，在获得元素焦点时，插入符号立即出现在输入的开头。就目前情况而言，插入符号出现在用户单击的位置，然后当我使用 jQuery
javascript - php表单刷新再次发送表单(防止)
当表单填写并发送时，如果您刷新页面，它表示表单将再次发送。 (再次提交表格)。防止这种情况发生的好方法是什么？或者终止这个 session ？这方面有什么指导吗？谢谢最佳答案处理完POST信
javascript - 防止@被输入输入字段？
我想阻止 @ 被输入到 input 中。但它不起作用，知道为什么吗？ $(function() { $(document).on('keyup', '[placeholder="x"]', fun
php - 防止 "corruption"
我正在使用 PHP 创建一个应用程序并涉及 MySQL。如果在请求过程中发生错误，我将如何“将查询分组在一起”，检查它是否会成功，然后对真实表进行实际影响。如果对表的实际更新失败，则恢复到更新之前的状
java - 防止/减慢反编译的技术
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Best Java obfuscator ? 对于我的示例，我知道 eclipse 提供了一个反编译插件。而
html - 防止 my::after 阻止我的选择
这是一个演示我的问题的 fiddle :JSFiddle 我正在制作自定义下拉菜单(实际上我使用的是 icomoon 图标而不是 V)...它看起来不错，但是父元素的 ::after 是阻止选择:(
Python:防止 "if"楼梯？
每当我编写需要大量条件的代码时，我都会这样做: if foo: if bar: if foobar: if barfoo: if foobarfoo:
android - 防止/使修补二进制程序集变得困难
我不确定术语是否正确，您可以使用哪些代码实践来使某人难以修改二进制文件/程序集以绕过检查: 例如在源代码中。 bool verificationResult = verify(); if (verif
MySql 防止/跟踪跨多个字段的重复字段
我正在寻找一种简单的方法来检查多个零件表，以确定给定零件号在添加到给定表之前是否已经存在。我目前想到的最好的想法是一个辅助表，它简单地将所有表中的每个 PN 列在一个列中，并带有一个唯一的键；但是我
javascript - 防止 "bubbling"？
这个问题在这里已经有了答案: jquery stop child triggering parent event (7 个答案) 关闭 8 年前。我不确定这是否真的冒泡，我会解释。我有这个:
java - 防止 & 符号转换为 &
我有一个 Spring MVC web 应用程序(不确定该信息是否重要，但它可能是)使用 ModelAndView 将字符串值传递给 JSP 文件。字符串值的形式是: d@.
php - 防止 csrf
我在这里尝试使用表单 key 方法进行 csrf 保护 http://net.tutsplus.com/tutorials/php/secure-your-forms-with-form-keys/
PHP 防止 xss
htmlentities 是防止 PHP 中的 XSS 的最佳解决方案吗？我还想允许像 b、i、a 和 img 这样的简单标签。实现这一点的最佳解决方案是什么？我确实考虑过 bbcode，但发现如果没
java - 防止 'PersistentObjectException'
我有一个非常基本的 JAX-RS 服务(下面的 BookService 类)，它允许创建 Book 类型的实体(也在下面)。 POST负载 { "acquisitionDate": 14188
typescript - 防止 "this"被重写TypeScript编译
我正在使用 Polymer 1.5，我确实需要“this”变量不要映射到外部。我知道 typescript 会为某些人做这件事 valid reasons . declare var Polymer:
python - 防止/改变对类变量的访问
这个问题在这里已经有了答案: Class-level read-only properties in Python (3 个答案) 关闭 6 年前。有没有一种方法可以通过重写实例变量的 __set

首页

博学

6Ren·AI

商城

html - 防止div重叠