我有2个div:一个在左侧,一个在我的页面右侧 . 左侧的那个有固定的宽度,我希望右侧的一个填充剩余的空间 .
#search {
width: 160px;
height: 25px;
float: left;
background-color: #ffffff;
}
#navigation {
width: 780px;
float: left;
background-color: #A53030;
}
<div id="search">Text</div>
<div id="navigation">Navigation</div>
23 回答
这似乎可以实现您的目标 .
新的css . 但我通过使用内联块解决了这个问题 . 看看这个:http://learnlayout.com/inline-block.html
@ Boushley的回答是最接近的,但是有一个问题没有得到解决 . 右侧div占用浏览器的整个宽度;内容采用预期的宽度 . 要更好地看到这个问题:
http://jsfiddle.net/79hpS/
内容位于正确的位置(在Firefox中),但宽度不正确 . 当子元素开始继承宽度时(例如带有
width: 100%
的表),它们的宽度等于浏览器的宽度,导致它们从页面右侧溢出并创建一个水平滚动条(在Firefox中)或不浮动并被按下(镀铬) .您可以通过将
overflow: hidden
添加到右列来轻松实现 fix this . 这为内容和div提供了正确的宽度 . 此外,表格将获得正确的宽度并填充剩余的可用宽度 .我尝试了上面的其他一些解决方案,它们没有完全适用于某些边缘情况,并且太复杂而无法修复它们 . 这很有效,而且很简单 .
如果有任何问题或疑虑,请随意提出 .
我有一个非常简单的解决方案! // HTML
// CSS
链接:http://jsfiddle.net/MHeqG/
我遇到了同样的问题,试图布局一些jqueryUI控件 . 虽然现在常见的哲学是“使用
DIV
而不是TABLE
”,但我发现在我的情况下使用TABLE工作得更好 . 特别是,如果您需要在两个元素中进行直接对齐(例如,垂直居中,水平居中等),TABLE提供的选项可为此提供简单,直观的控制 .这是我的解决方案:
我在Boushley 's answer is that if the right column is longer than the left it will just wrap around the left and resume filling the whole space. This is not the behavior I was looking for. After searching through lots of ' solutions中找到的问题'我在创建三个列页时发现了这个awesome tutorial .
作者提供了三种不同的方式,一种是固定宽度,一种是三列可变,一种是固定外柱,中间是可变宽度 . 比我发现的其他例子更优雅和有效 . 显着提高了我对CSS布局的理解 .
基本上,在上面的简单情况下,将第一列向左浮动并赋予其固定宽度 . 然后在右边的列中给出一个比第一列略宽的左边距 . 而已 . 完成 . Ala Boushley的代码:
这是 Stack Snippets &jsFiddle的演示
在Boushley的例子中,左列保持右边的另一列 . 一旦左列结束,右侧开始再次填充整个空间 . 右边的列只是进一步对齐页面,左列占据了它的巨大余量 . 无需流量交互 .
如果您不需要与某些浏览器的旧版本(例如IE 10 8或更低版本)兼容,则可以使用
calc()
CSS功能:我想知道没有人用
position: absolute
和position: relative
那么,另一种解决方案是:
HTML
CSS
Jsfiddle example
这是对已接受的解决方案的一点修复,它可以防止右列落入左列 . 用
overflow: hidden;
取代width: 100%;
是一个棘手的解决方案,如果有人不知道的话 .http://jsfiddle.net/MHeqG/2600/
[edit]同时检查三列布局的示例:http://jsfiddle.net/MHeqG/3148/
我尝试了上面的液体离开的解决方案,固定的权利,但没有工作(我知道问题是相反的,但我认为这是相关的) . 这是做了什么工作:
试试这个 . 它对我有用 .
我有类似的问题,我在这里找到了解决方案:https://stackoverflow.com/a/16909141/3934886
解决方案适用于固定中心div和液体侧柱 .
如果您想要一个固定的左列,只需相应地更改公式 .
尝试添加位置
relative
,删除右侧的width
和float
属性,然后使用0
值添加left
和right
属性 .此外,您可以添加
margin left
规则,其值基于左侧元素的宽度(如果您需要空间,则为某些像素)以保持其位置 .这个例子对我有用:
/ * * css * /
/ * * html * /
如果您尝试在两个项目之间的flexbox中填充剩余空间,请将以下类添加到要分隔的2之间的空div:
我有一个类似的问题,并提出了以下工作得很好
CSS:
HTML:
当窗口收缩时,此方法不会换行,但会自动扩展“内容”区域 . 它会保持站点菜单的静态宽度(左) .
对于自动扩展内容框和左侧垂直框(网站菜单)演示:
https://jsfiddle.net/tidan/332a6qte/
您可以使用Grid CSS属性,是最清晰,干净和直观的方式来构建您的盒子 .
现在,您应该使用
flexbox
方法(可能适用于具有浏览器前缀的所有浏览器) .更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
我已经在这个问题上工作了两天,并且有一个解决方案可能适合你和其他任何试图使响应固定宽度保持不变的人,并且右侧填充屏幕的其余部分而不包围左侧 . 我假设的目的是使页面在浏览器和移动设备中响应 .
Here is the Code
这是我的小提琴,可能对你有效,就像它对我一样 . https://jsfiddle.net/Larry_Robertson/62LLjapm/
使用
display:flex
解决方案来自display属性 .
基本上你需要使两个div像表格单元格一样 . 因此,不必使用
float:left
,而是必须在两个div上使用display:table-cell
,对于动态宽度div,您还需要设置width:auto;
. 应将两个div放入具有display:table
属性的100%宽度容器中 .这是css:
和HTML:
重要信息:对于Internet Explorer,您需要在动态宽度div上指定float属性,否则不会填充空格 .
我希望这能解决你的问题 . 如果你愿意,你可以阅读我在my blog上写的关于此的完整文章 .
Boushley的答案似乎是最好的方法,以便使用花车来安排这个 . 然而,它并非没有问题 . 您将无法使用展开元素中的嵌套浮动;它会破坏页面 .
当涉及到扩展元素时,所显示的方法基本上是“伪造它” - 它实际上并不浮动,它只是使用其边缘与固定宽度的浮动元素一起播放 .
那么问题就在于:扩展元素根本就没有嵌套;当你试图在你的"nested"浮动项目下粘贴
clear: both;
时,你最终也会清除顶级浮动 .然后,为了使用Boushley的解决方案,我想补充一点,你应该放置一个div,如下所示:.fakeFloat {height:100%;宽度:100%;向左飘浮;并将其直接放在展开的div中;所有扩展的div的内容应该在这个fakeFloat元素中 .
出于这个原因,我建议在这种特定情况下使用表格 . 浮动元素实际上并不是为了进行扩展而设计的,而使用表格的解决方案则是微不足道的 . 通常认为浮动更适合布局,而不是表格..但是你不是在这里使用漂浮,你是假装它 - 而这种情况在这个特定情况下会破坏风格论证的目的,我的拙见 .
由于这是一个相当受欢迎的问题,我倾向于使用BFC分享一个很好的解决方案 .
以下here的Codepen示例 .
在这种情况下,
overflow: auto
触发上下文行为并使右元素仅扩展到可用的剩余宽度,如果.left
消失,它将自然地扩展为全宽 . 许多UI布局的一个非常有用和干净的技巧,但最初可能很难理解"why it works" .