半流体布局 CSS/Html

2024-05-12

我有一个两列布局,其中右列的静态宽度为 350px,左列的宽度应填充页面的其余部分。或者至少这是我想要发生的事情,但不幸的是事实并非如此。

看一下我的 css/html:http://jsfiddle.net/CmJ7P/ http://jsfiddle.net/CmJ7P/。如果您能就如何实现这一目标提供任何帮助,我们将不胜感激。

编辑:如果可以的话,我更喜欢 IE6 中的解决方案


您需要从左列中删除浮动,并将右浮动列放在 HTML 中的第一个位置:

.wrapper {
  display: block;
}

.wrapper div.content {
  background-color: #ccc;
}

.wrapper div.sidebar {
  display: block;
  background-color: blue;
  float: right;
  width: 320px;
  height: 400px;
  padding: 0 20px;
}

html, body {
  padding: 0;
  margin: 0;
}
<div class="wrapper">
  <div class="sidebar" style="width: 350px">
    <div style="margin-top: 15px;">
    </div>
    <div class="sidebarpanel">
    </div>
    <div class="sidebarpanel">
    </div>
    <div class="sidebarpanel">
    </div>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed elementum libero. Morbi aliquam, nunc a ullamcorper eleifend, dui ante cursus odio, ac lacinia arcu neque vitae dui. In et ipsum orci. Donec laoreet imperdiet augue non sodales.
      Phasellus vel elit sit amet est mattis euismod. Duis non turpis eget ligula gravida mattis eget vitae turpis. Nunc vulputate lacinia posuere. Quisque nec feugiat quam. Praesent facilisis pulvinar tortor, sit amet fringilla nisl imperdiet at. In
      pulvinar dignissim dignissim.
    </p>
  </div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

半流体布局 CSS/Html 的相关文章

随机推荐

  • 使用管理员帐户运行asp.net程序

    我需要使用管理员帐户并启用桌面交互从 ASP NET 应用程序运行一个控制台应用程序 我尝试过下面的代码 控制台应用程序运行正常 但在网络服务帐户内 有什么想法如何在管理员帐户下运行控制台吗 string enginePath Server
  • 尝试使用 Rails 和 PostgreSQL 生成模型时,命令挂起且没有错误

    使用该命令时 rails generate model Event name string 什么也没发生 我必须按 CTRL c 我使用的版本是 红宝石 2 1 1p76 导轨4 1 0 PostgreSQL 9 3 4 Mac OS X
  • 如何将数据从 JavaScript 发送到 Python

    我正在 jinja2 和 python2 7 上使用 GAE 进行 Web 开发 我可以从Python获取数据 但我无法将数据从 JavaScript 发送到 Python 这是 JavaScript 代码 function toSave
  • 如何使用编译时间作为自动版本控制信息?

    当程序被编译以获得一种自动版本信息时 是否有任何常量或 pragma来获取时间和日期 DATE and TIME 是预定义的宏 将分别扩展到当前日期和时间
  • 如何格式化折线图谷歌图表材料上的轴?

    我在格式化材料图表的轴时遇到问题 Using classic line chart if I would like to format my vertical axis with a dollar sign I would do vAxes
  • OpenCV Visual Studio ntdll.dll

    我尝试在 Visual Studio 2013 上使用 OpenCV 2 4 10 创建一个项目 但由于以下异常 到目前为止我运气不佳 请建议帮助 TIA letstryitonemoretime exe Win32 Loaded C Us
  • CSS 网格最小内容不适合内容

    我试图通过显式分配行 列和元素大小来将一些 div 放入网格中 并允许 CSS 网格使用以下 CSS 执行列和行大小调整工作 display grid grid auto columns min content 价值min content应
  • 被一个简单的正则表达式难住了

    我想看看字符串是否s包含正则表达式中的任何符号 下面的正则表达式可以正常工作rubular http rubular com s asd d s 但在 Ruby 1 9 2 中 它给出了以下错误消息 syntax error unexpec
  • 如何将txt文件添加到你的android项目中? [复制]

    这个问题在这里已经有答案了 我的Android studio版本是1 5 1 显然这个 never 版本没有 txt 文件的 asset 文件夹 您打算如何将这些文件包含到您的项目中 以及如何进一步使用您内部的应用程序 谢谢你的建议 Pro
  • gtest 和 gmock 有什么区别?

    我试图理解的目的google mock Google 的 C 模拟框架 https github com google googletest blob master googlemock README md 我已经与gtest较早 但我还是
  • asp.net c# 将数据集中的数据转换为电子邮件正文?

    从数据集到电子邮件正文的最佳方式是什么 我有一个 net 控制台应用程序 用于根据存储过程的结果发送电子邮件通知 并且想知道如何最好地从 SQL 数据转到电子邮件正文 带有颜色和字体的 html 正文是最好的 但纯文本也可以 thanks
  • 打开文件路径在 python 中不起作用[重复]

    这个问题在这里已经有答案了 我正在编写一个数据库程序 personica 是我的测试主题 我通常在文件路径的位置有一个变量 但出于测试和演示的目的 我只有一个字符串 在我的计算机上的这个确切位置有一个文本文件 顺便说一句 因为我很偏执 所以
  • 从反应本机SectionList中的节项访问节数据

    我需要访问有关反应本机SectionList 中的renderItem 内的部分 索引 值 的信息 根据http docs w3cub com react native sectionlist renderitem http docs w3
  • 通过名称查找进程ID

    如何在 Ruby 中通过名称或完整命令行找到 pid 而不调用外部可执行文件 我正在将 SIGUSR2 发送到命令行包含的进程ruby job rb 我想在不打电话的情况下执行以下操作pgrep uid Process uid pid pg
  • CMake 和 Visual Studio:如何获得快速、安静的命令行构建?

    我有一个 cmake 项目 它成功地完成了我想要的一切 但我有大约 100 个文件 当我只需要重新编译一个文件时 我厌倦了每次看到生成的巨大输出 每个文件 30 行 明确地说 我正在编译cmake build 得到这个结果 我需要传递给编译
  • 需要一个正则表达式将 css 类添加到第一个和最后一个列表项

    更新 谢谢大家的意见 一些附加信息 它实际上只是我正在使用的一小部分标记 20 行 目的是利用正则表达式来完成工作 我还能够修改脚本 电子商务脚本 以在构建导航时插入类 我想限制我所采用的黑客数量 以便在更新到软件的最新版本时让事情变得更容
  • 以编程方式结束/退出粘合作业

    我正在使用 Glue 书签来处理数据 我的工作是每天安排的 但也可以 手动 启动 由于我使用书签 有时胶水作业可以在没有新数据要处理的情况下启动 然后读取的数据帧为空 在这种情况下 我想好好地结束我的工作 因为它没有什么关系 我试过 if
  • Correct_user 和 admin 的多个 before_filter 语句

    我有一个组资源 我正在尝试使用适当的授权来设置该资源 我试图实现的授权逻辑是这样的 只有群组成员才能查看他们的群组 管理员可以查看any组 以及采取其他行动 我尝试在组控制器中使用以下 before filter 语句来执行此操作 befo
  • NativeScript 错误。在列表模板中找到多个视图

    我有这样的ListView
  • 半流体布局 CSS/Html

    我有一个两列布局 其中右列的静态宽度为 350px 左列的宽度应填充页面的其余部分 或者至少这是我想要发生的事情 但不幸的是事实并非如此 看一下我的 css html http jsfiddle net CmJ7P http jsfiddl