页面内容显示在侧边栏下方

2024-01-07

我正在创建一个带有侧边栏的 html 布局。但我的标题和内容出现了我的侧边栏而不是旁边的。

.container { position:relative; padding:10px; top:0px; right: 0; left: 0; height: 1200px;}
#sidebar {
    position:relative;
    top:0; bottom:0; left:0;
    width:200px;
    height: 1000px;
    background: gray;
}

#header { border:1px solid #000; height:300px; 
    padding:10px; margin-left: 200px;
}
#content { border:1px solid #000; height:700px; margin-left: 200px;;
    padding:10px; 
}
<div class="container">
  <div id="sidebar">
      <a href="#"> Link1 </a>
  </div>
  <div id="header">
    <h2 class="title">Title</h2>
    <h3>Header content</h3>
  </div>
  <div id="content">
    <center>
      <p>Hello</p>
    </center>
  </div>
</div>

		

Thanks


添加“显示:内联块;”到您想要彼此相邻显示的元素。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

页面内容显示在侧边栏下方 的相关文章

  • 如何让CSS选择以字符串开头的ID(不是Javascript)?

    如果 HTML 中有这样的元素 id product42 id product43 如何匹配所有以 product 开头的 id 我已经看到了完全使用 javascript 执行此操作的答案 但是如何仅使用 CSS 执行此操作 id pro
  • 将 HTML 'label' 标签与单选按钮一起使用

    是否label标签与单选按钮一起使用吗 如果是这样 你如何使用它 我有一个显示如下的表单 First Name text field Hair Color color drop down Description text area Salu
  • 使用base64编码图像的优点和缺点[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在考虑为我正在开发的网站使用 Base64 编码图像来优化加载时间 不管怎样 在开始之前 我想知道 这样做的优点和缺点是什么 目前 我没有看
  • html5 canvas 上的错误显示 lineWidth=1

    I have example https developer mozilla org samples canvas tutorial 4 5 canvas linewidth html https developer mozilla org
  • Bootstrap Affix Nav 导致下面的 Div 向上跳转

    我使用 Bootstrap 的 Affix 函数创建了一个 JSFiddle 以便在向下滚动并且标题移出视图时使导航保持在屏幕顶部 我遇到的问题是 当使用纯 HTML 时 导航下方的文本会过早地跳起来并隐藏在导航后面 查看有问题的代码her
  • 类方法作为 JavaScript 中的事件处理程序?

    JavaScript 中是否有最佳实践或通用方法将类成员作为事件处理程序 考虑以下简单示例
  • 未捕获的 TypeMismatchError:无法在“CanvasRenderingContext2D”上执行“drawImage”

    我对以下代码片段有疑问 var o inserted motive find span contains document documentElement o 0 b fillText m i h b drawImage d i h e f
  • CSS使背景图像使用字体字符

    我想使用字体字符 例如来自 font awesome 作为输入元素的背景图像
  • iPad - 无法在框架内滚动

    我无法滚动 iPad Safari 中框架内调用的 pdf 我已经尝试过两件事 2 指滚动 使用对象 嵌入代替框架 但这是行不通的 事实上我已经尝试了很多东西 溢出 高度等等 请帮我 先感谢您 根据这篇文章http support appl
  • 如何去掉单词末尾多余的连字符

    我有句话我已经放了 shy 里面 它可以使用连字符 直到我达到足够小的屏幕尺寸 然后它在末尾添加一个额外的连字符 编辑 无法在 jsfiddle 中重现它 因为它似乎对 html 的解释不同 不过我可以展示问题的图片 h3 Flu shy
  • 在按钮之间添加空间?

    嗨 我这里有一个代码 除了一件事之外 一切都很完美 代码中每个按钮之间没有空格 我尝试过 margin 但不幸的是它是一个无序列表 所以我有点困惑 我将添加或替换什么以在两个按钮之间留出空间 帮助
  • 可以使用带有 HTML5 播放器的 Amazon S3/CloudFront 流式传输视频吗?

    我想使用 HTML5 视频播放器并流式传输视频 S3 CloudFront 可以实现这一点吗 我了解 Amazon 使用 RTMP 流媒体协议和 HTML5video标签不支持 RTMP 有没有办法用 HTML5 播放器播放视频 Wayne
  • 如何防止弹性项目高度因其内容而溢出[重复]

    这个问题在这里已经有答案了 我刚刚开始学习 Flex 到目前为止我印象深刻 但是 我对包含页眉 页脚和三列的全页应用程序遇到了问题 第一列包含一个项目列表 由于我无法为其父级设置固定高度 因此每次列表增长时 它都会将页脚向下推 这是一个带有
  • Twitter bootstrap 3表单水平和单行多个输入列

    我需要将多列输入放在单行中 如下所示 我通过将多个输入分组为一个来做到这一点form group 但是这样我不能使用has error class div class form group div
  • CSS - div 与父 div 底部对齐(内联块)

    我知道这个 html 很草率 有一些不必要的额外 div 但无论如何 我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐 您可以看到 文本 与下面的 jsfiddle 示例的底部 有什么想法可以让
  • 如何为 TBODY 应用垂直滚动条

    我的表中有 4 列和 5 行数据 我必须为 TBODY 应用垂直滚动条 TH 标题内容不应滚动 我对场景进行了编码 并且在我将滚动类应用于 TBODY 之前它工作正常 一旦我将滚动样式类应用于 TBODY 它就会破坏之前的对齐方式 任何人都
  • 如何使用 JavaScript 获取元素的填充值?

    我有一个textarea在我的 HTML 中 我需要获取整数或浮点形式的填充数值 以像素为单位 我如何使用 JavaScript 获取它 我没有使用 jQuery 所以我正在寻找纯 JavaScript 解决方案 这将返回padding l
  • 不使用控件时,视频元素在 Chrome 中消失

    So I think这是一个浏览器错误 它出现在一个更复杂的设计 网站中 但我已经进行了很好的尝试 简化了我的代码和设计等 并发现了以下内容 嵌入时
  • 在webview android中加载本地html文件

    我正在尝试在 android 的 webview 中加载 html 文件的内容 但是 它给了我 网页不可用错误 如果我尝试使用谷歌或雅虎等网站 它们就会起作用 html文件位于src gt main gt assests gt index
  • 使用 VBA 通过 Access 导航网页/操作 IE

    你好 StackOverflow 社区 我有一个关于使用 Access VBA 操作 IE 的问题 本质上 我正在尝试编写代码 使用 IE 打开特定网页 在该页面中搜索特定链接 目标链接的名称将取决于用户的情况 通过以编程方式单击该链接导航

随机推荐

  • scala protected 修饰符转换为 java 类是 public

    在 scala 类中 我定义了一个受保护的字段和一个受保护的方法 TestProtected scala class TestProtected protected var f 0 protected def m 1 在我看来 它将把受保护
  • 将表从 .sql 复制到 .db 文件。艰难地学习 SQL

    我很确定对此有一个简单的答案 但我在任何地方都找不到它 而且似乎自己也无法弄清楚 任何帮助将不胜感激 我正在尝试从 a 复制一个表 sql file ex1 sql 其中有一个基本表 我可以毫无问题地创建这个 但是然后我运行以下命令将此表复
  • 此外,使用现有身份验证对作为 Azure WebApp 托管的 ASP.NET Core MVC 网站进行密码保护

    我有一个带有 ASP NET Core Identity 的现有 ASP NET Core MVC 应用程序 其中我使用了以下组合signInManager PasswordSignInAsync and Authorize 强制用户登录网
  • 如何通过 1 的位置列表解码 0 和 1 的列表?

    我想创建一个List Int 仅包含 0 和 1 数组中定义的 0 和 1 的位置 val bitMask List 2 5 6 11 621 655 bitMask 是结果列表中位置一的列表 结果列表中的项目为零 结果我想得到 resul
  • Python PyEphem 计算方位角和高度

    我是 PyEphem 的新手 我正在尝试弄清楚它可以做什么以及它是如何工作的 由于我不想将其用作黑匣子并盲目相信我得到的任何数字 因此我想重新创建一个解释的示例here http www stargazing net kepler alta
  • 停止读取 Python 中的进程输出而不挂起?

    我有一个适用于 Linux 的 Python 程序 几乎看起来像这样 import os import time process os popen top readlines time sleep 1 os popen killall to
  • 使用 PagedList 和成员资格

    我一直在玩 Troy Goode 的 PagedListhttp pagedlist codeplex com http pagedlist codeplex com 我想知道是否有人已经让它与内置的 asp net 会员部分一起工作 我有
  • 将焦点设置在 xaml wpf 中的文本框上

    尽管这个论坛和其他论坛上有一些帖子 但我找不到一些东西来告诉我如何将焦点放在TextBox 我有一个带有许多标签和文本框的用户控件 加载表单时 我希望特定的文本框具有焦点 我已经设置了 tabIndex 但这似乎不起作用 有什么建议么 您可
  • Symfony 2 中的中间路由可选参数

    需要解决的问题 在 Symfony 2 中是否可以用 定义路由中间的 可选参数 我将使用其他问题数据 https stackoverflow com questions 17059843 routing in symfony2 option
  • ASP.NET MVC:动作过滤器设置控制器变量?

    我有一个场景 对于每个页面请求 我都必须检查会话是否存在特定 ID 如果发现这一点 我必须从数据库中获取相关对象并将其提供给控制器 如果找不到会话 ID 我需要重定向用户 会话已过期 目前 我有一个自定义代码块 几行 它在控制器内的每个操作
  • 防止在插件中创建

    我在服务活动的预创建上注册了一个插件 在插件中 我检查一些条件 如果满足这些条件 我想停止创建服务活动 我想创建另外两个服务活动来代替该服务活动 但我不希望用户收到这一切的通知 有没有办法停止在 CRM 2011 上的插件中创建 SA 记录
  • 如何将 UUID 转换为 base64?

    我想打字UUID并将其输出到Base64编码格式 但是考虑到输入方法Base64并输出UUID如何实现这一点似乎并不明显 update虽然对于我的用例来说不是明确的要求 但最好知道所使用的方法是否使用 UUID 的原始 UUID UUID
  • 使用相同的 docker 映像部署多个 Cloud Run 服务

    有超过 25 个 Cloudrun 服务使用相同的 docker 镜像 来自 GCR 但配置了不同的变量 有什么简单可靠的方法可以使用来自任何类型传入事件的最新容器映像来部署所有服务 目前使用下面的CLI命令来手动执行一一执行 有没有一种自
  • java子类的私有final字段可以在超级构造函数完成之前初始化吗?

    我有一对像这样的课程 public abstract class Class1 public Class1 function2 protected abstract void function2 public class Class2 im
  • mkstemp 的 java 等效项

    Java中有什么方法可以安全地写入临时文件吗 据我所知 创建临时文件 createTempFile 的唯一方法实际上并不同时打开它 因此文件打开和文件写入之间存在竞争条件 我错过了什么吗 我在 UnixFileSystem java 中找不
  • Vaadin 中当前 UI 的访问方法

    我目前正在 Vaadin 开发 Java Web 应用程序 我想从另一个类访问位于我的 LoginUI 中的 getter 方法 UI getCurrent 成功返回当前线程 LoginUI 我需要调用哪些方法来实现此目的 先感谢您 UI
  • 错误:写入失败、打开流失败、pecl 在 mac osx el Capitan 上安装 oauth

    我正在尝试使用 pecl install 在本地安装 OAuth 版本 1 2 3 在 Mac OSX El Capitan 上运行 PHP 5 6 10 在命令提示符中运行以下命令 sudo pecl install oauth 1 2
  • 如何检测 Racket Web 应用程序上的按键?

    我已经浏览了网络服务器的文档 但找不到任何内容 这是我的基本 Web 应用程序的代码 lang racket require web server servlet web server servlet env define test def
  • Mysql - 可视化 Web 开发人员 - 实体框架

    我遇到以下问题 我有 Visual Web Developer 2010 Express 我正在尝试让它与实体框架和 MySQL 数据库一起使用 我安装了 NET Connector for MySql 但它似乎没有与 Web Develo
  • 页面内容显示在侧边栏下方

    我正在创建一个带有侧边栏的 html 布局 但我的标题和内容出现了下我的侧边栏而不是旁边的 container position relative padding 10px top 0px right 0 left 0 height 120