个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我有两个 Div，左边一个是各种侧边栏(但它不会延伸到屏幕的整个高度)，右边一个是内容 Div，它应该尽可能多地占据屏幕并折叠/在屏幕缩小时移动到侧边栏下方。现在我已经按照我的预期设置了侧边栏，但是随着页面缩小，Content Div 开始与侧边栏重叠并且没有移动到下方。
我尝试了不同的位置:参数(固定的、绝对的、相对的)不同的宽度/最小宽度值，以及不同的 float 值。为了简单起见，我现在拥有 html 样式中的所有内容。正在使用的 css 文件似乎会干扰功能，因此我试图通过直接在 HTML 中设置样式来覆盖它们。
<body style="padding-top: 5px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; min-height: 80%; min-height: 50vh;">
<h3 class="text-center"> Title </h3>
<div class="SideContainer" style="background-color: green;position:absolute;left:0; top:80; bottom: 400;width: 20vw;min-width: 200px;max-width: 300px;padding: 3px;">
<div style="background-color: red;width: 100%;">Keys</div>
<div style="background-color: blue;">Error Box</div>
<div style="background-color: grey;border: none;width: 100%;border-radius: 3px;">File Menu Button</div>
<p> Enter Display Name</p>
<div style="background-color: yellow;">Name Box</div>
<p> Users Viewing </p>
<div style="background-color: orange;">User box</div></div>
<div class="ContentContainer" style="background-color: gold;position: relative;float: left;left:20vw; top: 25;width:80%;min-width: 400px;margin-right: 3px;padding: 8px;">
<div style="background-color: purple;border: 1px solid;border-radius: 4px;line-height: 2.6;padding: 3px;margin-bottom: 6px;">Doc Title</div>
<div style="background-color: maroon;min-height: 150px;border: 1px solid;border-radius: 4px;padding: 3px;">Doc Content</div></div><body>
Content div 应该缩小，并在某个点移动到 Sidebar div 下方。
最佳答案
<body style="padding-top: 5px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; min-height: 80%; min-height: 50vh;">
<h3 class="text-center"> Title </h3>
<div style="display: flex; flex-flow: row wrap;">
<div class="SideContainer" style="background-color: green;left:0; top:80; bottom: 400;width: 20vw;flex-grow: 1;padding: 3px;min-width: 200px;max-width: 300px">
<div style="background-color: red;width: 100%;">Keys</div>
<div style="background-color: blue;">Error Box</div>
<div style="background-color: grey;border: none;width: 100%;border-radius: 3px;">File Menu Button</div>
<p> Enter Display Name</p>
<div style="background-color: yellow;">Name Box</div>
<p> Users Viewing </p>
<div style="background-color: orange;">User box</div>
</div>
<div class="ContentContainer" style="background-color: gold;float: left;left:20vw; flex-grow: 4;top: 25;margin-right: 3px;padding: 8px;min-width: 200px;">
<div style="background-color: purple;border: 1px solid;border-radius: 4px;line-height: 2.6;padding: 3px;margin-bottom: 6px;">Doc Title</div>
<div style="background-color: maroon;min-height: 150px;border: 1px solid;border-radius: 4px;padding: 3px;">Doc Content</div>
</div>
</div>
<body>
我使用 Display:flex 让您的代码正常工作，将您的代码也分成 html 和 css 并在 HTML 中使用类引用是个好主意。这样做有很多好处，包括更易于维护、更清洁以及易于遵循等。
关于html - 将 Div 设置为在屏幕尺寸缩小时移动到另一个 Div 下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54262508/
25
4
0
我正在使用matplotlib创建简单的线图。我的图是一个简单的时间序列数据集，其中我沿x轴有时间，而我在y轴上有测量的值。 y值可以具有正值或负值，如果y值> 0，则我想用蓝色填充行上方和下方的颜色
我有一个简单的菜单，当单击菜单项时，该菜单会滚动到某个部分。 例如: Contact 将滚动到: 但是我也有一个始终粘在顶部的菜单，并且该菜单的高度不是用滚动脚本计算的。因此菜单总是悬停在元素的顶部
我有一个 UISearchBar 和 UISearchDisplayController，一切都很好，但我的范围选择器显示在文本字段旁边而不是下方。我知道这是设备横向时的预期操作，但由于我在 UISp
因此，我正在创建一个根据用户输入增大和缩小的 ListView ，我需要四个按钮，但我不知道如何让按钮与 ListView 的底部对齐并位于2x2 网格时尚。我已经尝试过相对布局，但似乎不起作用。谢谢
我正在使用的系统无法直接编辑每个页面上的 HTML。我想添加特定页面正文的顶部，但我输入 HTML 的框会自动将脚本放置在上面 我尝试过这个: $('body').prepend(''); 任何帮
设计模式一切都很好，但在实时导航栏位于 ScrollView 下方我该如何解决这个问题？请帮忙 最佳答案 同样，在没有看到任何代码的情况下很难说，但我相信导航栏根本没有显示。如果您直接从另一个 Vie
我现在必须重用和修改其他人的代码来创建图像处理应用程序。以下代码用于设置框架及其 GUI。我遇到的问题是，当在菜单栏上单击文件字时，菜单项列在 originalImage 容器中包含的 Canvas
我创建了一个 Angular 指令，用户可以在其中根据一天中的时间更改某些设置。下面是我已有的图片: 我想在 div 的 x 轴上添加一种准确表示时间的“滴答”，以向用户显示他在做什么，如下图所示:
这是下面的代码。 body { font-family: "Lato", sans-serif; } .sidenav { width: 130px; positio
这个问题在这里已经有了答案: Z-Index not working? [closed] (1 个回答) 关闭 5 年前。
我搜索了这个并尝试了 Z 轴的东西，但无济于事。基本上，我的导航栏在其下方的 div 下方显示有子菜单。那个 div 发生了不透明的事情，这一定与它有关。我需要这些显示在 div 上方!! JS fi
我正在处理的网站的某些页面使用脚本自动创建基于页面标题的目录。但是，我在获取“toc”div 以将页面的其余内容推送到其下方时遇到了一些问题。 TOC div 在我页面的最里面的 div 中，“con
我的代码 http://jsfiddle.net/p796z/1/ HTML Content Content Content Content Content Content
请看下面的代码: Button dropdown
我有一个表格，我希望它直接位于 Logo 下方位于页面中间。到目前为止，我似乎做不到更有什者。任何帮助将不胜感激。谢谢。 这是 HTML 代码:
我的 web 应用程序在与 jQuery Mobile 和 cordova 的聊天部分出现问题。我决定用 textaera 和发送消息的按钮修复页脚。但是当我触摸文本区域写消息时，我的键盘没有出现。我
我有两个来回箭头，可以单击它们在我的单页网站上的框架中浏览照片。我的术语在这里可能不正确。保存照片和前后箭头的 div 出现在我的屏幕下方，而不是在屏幕场景 div 中。我可以将图像向上移动以出现在屏
我使用自定义 CSS 和 Bootstrap 类名称构建了这个 header 。我已经尝试了 z-index、float: initial 属性。提前致谢 .branding-preview {
我有两个部分介绍网站上的用例和好处。如下。 .onboardmessaging { min-width: 100%; } .onboardmessagingwrap { min-wi
所以，我在网站上发现了这个很酷的 css/html slider ，所以我下载了代码，并打算研究它。我已经开始根据自己的需要对其进行编辑和设计，然后我遇到了这个问题:当我添加比原始尺寸更大的图像时，导
我是一名优秀的程序员,十分优秀！