个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我在创建具有 3 个 div 的 3 列布局时遇到困难。左边的 div 需要固定宽度。中间和右边的 div 需要有流动的宽度。当浏览器水平调整大小时，中间和右边的 div 需要按比例调整。
我见过一些 3 列流体布局与其他固定列的示例，但不是固定流体布局。
复制我的问题的标记如下。 CSS 有点冗长，因为我一直在对此进行故障排除。当我调整浏览器大小时，右侧的 div 消失在水平线下方。此外，这 3 列应该占据 #caption_stripe 宽度的 100%，但实际上并没有。右侧显示大约 2-3 个像素的间隙。
<html>
<head>
<style>
.contentMain {
clear: both;
overflow: hidden;
width: 100%;
max-width: 1024px;
margin: 0 auto 0 auto;
}
#lessons_wrapper { background-color: blue; }
#caption_stripe {
position: relative;
overflow: hidden;
height: 37px;
width: 100%;
max-width: 1024px;
font-family: Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
font-size: 11pt;
font-weight: bold;
text-align: center;
color: white;
margin: 0;
padding: 0;
}
#caption_subjects {
float: left;
height: 37px;
background-color: #3c3d3d;
width: 13%;
max-width: 138px;
min-width: 138px;
margin: 0;
padding: 0;
}
#caption_topics {
float: left;
height: 37px;
background-color: #707070;
width: 42%;
max-width: 422px;
min-width: 100px;
margin: 0;
padding: 0;
}
#caption_modules {
float: left;
height: 37px;
background-color: #989898;
width: 45%;
max-width: 464px;
min-width: 100px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="contentMain">
<div id="lessons_wrapper" style="display:block">
<div id="caption_stripe">
<div id="caption_subjects">SUBJECTS</div>
<div id="caption_topics">TOPICS</div>
<div id="caption_modules">MODULES</div>
</div>
<br style="clear:both;" />
</div>
</div>
</body>
</html>
我还需要使用将出现在该标题下方的 div 进行更大的缩放。现在，如果我能得到一个这个工作的例子，我可能也能得到那些工作。
感谢您的帮助。
最佳答案
如果要修复，我不确定为什么第一列有 % 宽度。
但要注意的主要事情是，将流动的 div 放入包装 div 中。然后给你的包装器一个等于你的固定列宽度的左填充。
.fluid-wrapper {
width: 100%;
height: 100%;
padding-left: 100px;
}
为此，您需要申请 box-sizing到 wrapper 。这意味着填充将从包装器的内部宽度中扣除，而不是添加。
在所有元素上使用 box-sizing 是相当安全的，这在创建流畅/响应式设计时会有很大帮助。
*, *:after, *:before {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
这是一个有效的 JSFiddle:http://jsfiddle.net/nhwGA/1/
关于css - 需要一个 CSS 3 列布局 fixed-fluid-fluid，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15670172/
26
4
0
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 3年前关闭。 Improve thi
有人知道可以在线使用 FIX 实用程序来验证修复消息吗？即:接受修复消息并检查诸如正文长度和校验和之类的内容。谢谢 最佳答案 https://fixspec.com 上有一个修复日志解码器.当您输入一
在FIX服务器上发送订单请求并更改标签的顺序。 如果我想要输出由我安排的序列(而不是被服务器修改)。 public void send50(Order order) { quickfix.fi
我正在用 C++ 构建一个 FIX 引擎，但我没有引用来了解什么是好的性能数字。考虑到网络时间和 FIX 解析时间，客户端向服务器发送 FIX 消息的最佳时间(以微秒为单位)是多少？还有人知道这个简单
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用，以及
我不明白为什么我的固定背景开始出现，因为它有时没有被固定。 这是一个非常特殊的案例，我知道如何解决它。 您可以删除: .row2 position:relative 或 row1 div -webki
我看过三列的例子(fixed fluid fixed)。但是，我需要一个四列解决方案的示例。 两个外部列是固定的。两个内柱是流动的。 固定 |流体 |流体 |固定 最佳答案 您可以使用 calc .
我试图说服自己输入 Fix和功能 fix是一回事。 但我找不到他们的定义之间的相关性 -- definition of fix fix :: (p -> p) -> p fix f = let {x
这是我已经在这里提出的另一个问题的后续How can I play a single tone or custom wave with Delphi? 长话短说，我使用 MMSystem 的 wave
刚刚完成一个站点并遇到位置问题:已在 IE7 上修复。我用谷歌搜索并尝试了不同的 Doctypes，但固定区域在 IE7 上仍然不在位。 我没有 IE7，但一位客户员工有，我可以使用在线 IE 渲染器
我有我的 设置为 background-attachment: fixed但这留下了我的标签正常滚动。如果我设置 position: fixed到我的标签，它们会跳转到页面顶部。有什么办法可以做与 b
我有一个包含标题页(导航栏)的 php 页面。我想将导航栏显示为固定标题，但每当将其位置更改为固定时，它都会删除滚动条(水平和垂直)并且我无法滚动页面。如果我想保持我的标题固定并且我不想固定位置。我怎
已结束。此问题不符合 Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是无关紧要的，
我正在使用 jquery mobile，对于页眉/页脚，我使用的是 data-position="fixed"。 但是，当我们滚动页面时......页眉页脚消失并在滚动停止时重新出现.. 有没有一种方
我正在尝试连接到使用 FIX 5.0 的代理 我想利用 quickfixj以方便和快速地实现。 这行吗？我假设 5.0 extends(可以这么说)以前版本的功能，但我不想走得太远，结果导致更多问题，
如何放置 position:fixed内容在页面背景中的容器，而其他内容在其上滚动，同时仍然保持点击背景元素的能力？ 效果类似于前景内容在固定背景上滚动的视差滚动情况，但我希望能够将 HTML 放在背
我尝试将 z-index 设置为 body 下的某些位置为 fixed 的元素 示例如下: HTML menu content ....
我花了几个小时寻找这个问题的答案，但其他人提供解决方案的场景似乎比我的稍微简单一些。 有没有办法在固定大小的 div 中放置一个 position:fixed 元素，而该元素不会溢出 div？ 换句话
此问题已在 SO 和其他地方多次报告，但我找不到任何有效的解决方案。 如果您有固定位置的 div 和固定附加的背景，在某些特定情况下，在 Google Chrome 上呈现会出现错误(在 Firefo
我想在我网站的页面顶部创建一个标题栏，但我在布局方面遇到了问题。以下是我想要的结果: goal http://ambiguities.ca/images/goal.png 这是 html:
我是一名优秀的程序员,十分优秀！