我正在寻找一种方法,将2个div作为列,右边的div有一个固定的宽度,div在左边填充剩余的空间.
有谁碰巧知道这是否可以做到？
我的尝试(在block1下面呈现block2):
<style>
.block1 {
width: auto;
height: 200px;
background-color: green;
}
.block2 {
float: right;
height: 200px;
width: 200px;
background-color: red;
}
</style>
<div class="block1">test1</div>
<div class="block2">test2</div>
我有一个类似于CSS Auto Margin按下其他元素的问题:右浮动侧边栏被推到主非浮动内容div下面.建议的答案是:只需反转标记的顺序,并在非浮点div 之前写出浮点div.
例如,这个:
<div class="container">
<div id="non-floating-content">
fooburg content
</div>
<div id="float-right">
test right
</div>
</div>
需要笨拙地重新订购:
<div class="container">
<div id="float-right">
test right
</div>
<div id="non-floating-content">
fooburg content
</div>
</div>
那么,为什么这也可以在没有重新排序的情况下工作:使用基于网格的设计的最大宽度和最小宽度的弹性布局？查看现场演示.标记的顺序仍然合理:float div 在非浮点div 之后写出.然而浮动不会被推到页面上.
我问,因为我不想破解主题PHP(重新排序div)以便正确地设计它.
其他也说解决方案的帖子是"重新订购你的div":
标题说明了.我想要一个2列CSS布局:
如果窗口大于最大宽度,则内容将以页面的最大值为中心.如果窗口小于最大宽度,则内容将填充页面的100%,除非它小于最小宽度,这将使水平滚动条出现.
我愿意使用一些小的javascript来处理不支持这些属性的浏览器的最小/最大宽度(我正在看你IE6),但我只是愿意让这部分布局降级.
用桌子来简单下降.我已经看了几百个示例布局,没有什么可以做我要问的所有事情,尽管有几个接近.问题似乎是以相同的方式获得流畅的左列和源排序.我已经找到了几个固定的左/右流体(与我想要的相反)的例子,其具有适当的源顺序,或流体左/右固定而没有源顺序,但不是两者.
我不在乎它是否使用浮点数或负边距,但我想避免绝对定位.
+---------------------------------------+
| |
| +---------------------------+-----+ |
| |fluid |fixed| |
| | | | |
| | | | |
| +---------------------------+-----+ |
| |
+---------------------------------------+
据我所知float:left,它会将后续元素推到左侧而不是新线上.
在下面的例子中,我希望第二个div从第一个div的右边开始,但正如你在下面的jsfiddle中看到的那样,它仍然跨越整个宽度.
另一方面,内容神奇地从它应有的地方开始.请问float规则只浮于内容而不是利润？
.inline {
float:left;
}
.yellow {
background-color:yellow;
}<div class="inline">
first line<br>
second line<br>
third line<br>
</div>
<div class="yellow" >floated div</div>编辑:我希望上面的代码看起来像这样,但没有明确需要使用边距.
关于这个问题的另外两个答案建议覆盖div.ui-input-text {}
但是,我在此页面上以及我的项目中有多个输入字段.因此,这些答案将无效,因为它们会影响我的页面或项目中的所有内容.
如何修改单个文本输入？
输入标记中的类名称不起作用.如果我用div标签封装输入,它仍然不起作用.我试图在最后添加一个图标,但似乎所有Jquery移动文本输入都占据了整个屏幕.
<input class="address" type="text" name="address" id="basic"
placeholder="Street Address, City, State" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
CSS, No Effect!
.address {
width: 200px !important;
}
现在,我仍然可以切换到Bootstrap,如果这是更好的方式继续这个项目.它似乎有.col-xs-*类来解决这个问题.
提前致谢.
我有一个两列布局,其中我有一个350px右列的静态宽度,而左列的宽度应该是它填充页面的其余部分.或者至少这是我想要发生的事情,但遗憾的是事实并非如此.
这是我的css/html:http://jsfiddle.net/CmJ7P/.任何有关如何实现这一目标的帮助都将非常感激.
编辑:如果可以,我更喜欢IE6中的解决方案
我搜索过网络,似乎无法找到干净,简单,所有浏览器友好的3列布局.
我希望有3列布局,左列是200px固定,右列是200px固定,中间列是剩余宽度,但最小宽度为600px.因此整体最小宽度为200px + 600px + 200px = 1000px.
我看到很多例子,当调整浏览器大小时,列似乎相互重叠,这是一个问题.
谢谢