标签: fluid-layout
半流体布局CSS/Html
我有一个两列布局,其中我有一个350px右列的静态宽度,而左列的宽度应该是它填充页面的其余部分.或者至少这是我想要发生的事情,但遗憾的是事实并非如此.
这是我的css/html:http://jsfiddle.net/CmJ7P/.任何有关如何实现这一目标的帮助都将非常感激.
编辑:如果可以,我更喜欢IE6中的解决方案
推荐指数
解决办法
查看次数
流体柱布局,它们之间有固定的像素边距？
我不想为此使用JS,只需要一个css解决方案.
我希望包含div的列内部相同,即每个都是容器宽度的三分之一.我在这里实现了这个目标 - http://jsfiddle.net/yFxZX/
然而,除此之外,我还想要10px margin在列之间,第一列接吻容器的左边缘,右列接吻容器的右边缘.看下面的图片进行粗略模拟.
当浏览器重新调整大小或父容器更改宽度时,我希望列相应地调整大小以填充空间,但它们之间的边距保持固定为10px.
没有JS可以做到这一点吗？
推荐指数
解决办法
查看次数
在流体布局twitter bootstrap中修复了右边的边栏
我想在我的网站右侧创建一个修复侧边栏但是当我给style="position:fixed;"它的div时它只是完全在左边.
<div class="span2" style="position:fixed; background-color: white;">
CONTENT
</div>
我怎么做？我应该为项目的每个分辨率赋予像素位置以保持响应吗？
推荐指数
解决办法
查看次数
固定尺寸箱体的CSS流体网格
到目前为止,我有一个相同大小的盒子的流体网格.屏幕宽度为800px或更大时,屏幕上有两排四个蓝色框,如图所示.代码如下:
<style type="text/css">
body {width:100%; min-height:100%;}
#content {width:100%; max-width:800px; margin:0 auto;}
.box { float: left; display: table; height: 180px;
width: 180px; margin:10px; background-color:blue;}
</style>
<body>
<div id="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
随着屏幕宽度的减小,盒子保持相同的尺寸,每行的盒子数量减少,并且它们下降到更多行.所有这些正是我想要的.唯一的问题是,随着屏幕宽度的减小,盒子变得左对齐.
我希望剩下的行居中.有人可以帮忙吗？
推荐指数
解决办法
查看次数
删除移动视图上的HTML元素？
我没有使用jquery mobile。
我在WordPress中构建了一个模板，并为每个页面设置了全角背景：Background_1.jpg =主页，Background_1.jpg =关于，ens ....
这是前端加载的内容：
<div id="bg">
<img id="background" src="images/Background_1.jpg" alt="background">
</div>
所以我的问题是以下几点：
当我进入流体网格布局时，我想完全删除此元素以加快加载时间。
我也不想隐藏它，我想在窗口大小小于600px时删除html。
有人做过吗？
推荐指数
解决办法
查看次数
css中的%值使图像消失
我在扩展响应性元素方面遇到了一些问题.
如果我使用px值,缩放是正确的,行为就像我想要的那样.但由于我希望我的移动css与尽可能多的设备兼容,我更喜欢使用%值.问题是,只要我将px值切换到%值,我的图像/内容就会消失或缩放到非常小的比例,并且也会改变x和y位置.
是否有任何已知问题可能导致浏览器难以使用%值？我环顾四周但找不到任何描述我的问题的东西.
我的问题的例子:
.header{
width: 30%;
margin: auto;
position: relative;
}
.logo{
background-color: #FF0000;
width: 100px;
height: 100px;
display: inline-block;
margin: auto;
}
.header{
width: 30%;
margin: auto;
position: relative;
}
.logo{
background-color: #FF0000;
width: 100%;
height: 100%;
display: inline-block;
margin: auto;
}
推荐指数
解决办法
查看次数
3列布局(固定,流体,固定),最小宽度
我搜索过网络,似乎无法找到干净,简单,所有浏览器友好的3列布局.
我希望有3列布局,左列是200px固定,右列是200px固定,中间列是剩余宽度,但最小宽度为600px.因此整体最小宽度为200px + 600px + 200px = 1000px.
我看到很多例子,当调整浏览器大小时,列似乎相互重叠,这是一个问题.
谢谢
推荐指数
解决办法
查看次数
CSS 在元素调整大小时增加字体大小
在重新调整浏览器大小时，我的输入会增加和减少。如何更改相同的字体大小？没有js可以吗？font-size 应该是 100% 输入高度。
http://jsfiddle.net/krLf0cbc/7/
<div class="container">
<div class="inner">
<input class="input"/>
</div>
</div>
和CSS
.container {
width: 100%;
}
.inner {
position: relative;
}
.input
{
position: absolute;
padding-bottom: 10%;
width:100%;
}
推荐指数
解决办法
查看次数
具有流体/液体宽度的jQuery图像转盘
你们有没有人知道一个流畅宽度的jQuery图像转盘吗？
我发现了这个:http://www.nikolakis.net/liquidcarousel/ ...但是当你设定速度时它看起来很可怕.
此外,我希望当鼠标向一个方向移动时激活它,滑块应该向另一个方向移动.那顺便叫什么呢？
先感谢您.
推荐指数
解决办法
查看次数
jQuery Isotope - 具有两个不同大小元素的流体布局
我在页面上有一个基本的照片布局(用于投资组合).有两种不同尺寸的图像砖,较大的图像砖与较小且正好是宽度和高度的两倍成比例,并且块或窗口之间没有边距.只有几个较大的块与几十个较小的块混合在一起.它是一个响应式设计,因此当窗口大小下降到某个宽度以下时,全尺寸网站上的列数为5%,列数为33.333%,所有列都在100%最大宽度容器内.在每块砖内,图像设置为100%宽度和CSS自动高度.我已经包含了一个线框来说明我所描述的内容.
我遇到的问题是让同位素响应流体布局.如果我在比最大宽度宽的窗口中加载页面,它会完全按预期放置块.但是,当我将浏览器窗口缩小到最大宽度以下时,块会开始变得非常不稳定,在某些变体中:堆叠在一列中; 堆叠在两列中,空列之间; 图像之间的差距; 在大图像下留下一个空行.
我可能不是很好地解释自己,但只是想知道是否有人使用具有流畅布局的Isotope并且可能有一些洞察力.
推荐指数
解决办法
查看次数