草庐IT

some_div

全部标签

jquery - 响应式设计 : How to resize images/background images and align divs vertically?

我正在尝试响应式设计。我的图片目前没有调整大小。在我的标记中,我还将背景图像应用于某些需要调整大小的div。这是HTMLView:http://jsbin.com/emojeg/2请在此处查看代码:http://jsbin.com/emojeg/2/edit对于800像素到1100像素之间的屏幕宽度,我想调整图像的大小。对于低于800像素的任何内容,我想垂直对齐相框-无论屏幕宽度是否允许,每行1或2个。目前,当我将浏览器调整为更窄的宽度时,最多2个框架会换行到下一行,但如果我继续进一步调整大小时,相框的背景似乎被切断并且一些图像似乎消失了。不确定如何解决这个问题。

javascript - 为固定的 100% 高度 div 创建可滚动内容

我想创建一个可滚动的div。我知道这里有很多例子,但它们都不适合我。我有一个.page类,它填满了我的手机屏幕。在它里面我有一个.contentdiv。这包含页面的内容。它只是从顶部对齐内容,如果超出.content的边界,它应该滚动内容。.page{margin:0;padding:0;min-height:100%;width:100%;display:block;}.content{padding:4em000;overflow-x:hidden;overlofw-y:auto;/*-webkit-overflow-scrolling:touch;*/}我应该怎么做才能使其正常工

javascript - 为固定的 100% 高度 div 创建可滚动内容

我想创建一个可滚动的div。我知道这里有很多例子,但它们都不适合我。我有一个.page类,它填满了我的手机屏幕。在它里面我有一个.contentdiv。这包含页面的内容。它只是从顶部对齐内容,如果超出.content的边界,它应该滚动内容。.page{margin:0;padding:0;min-height:100%;width:100%;display:block;}.content{padding:4em000;overflow-x:hidden;overlofw-y:auto;/*-webkit-overflow-scrolling:touch;*/}我应该怎么做才能使其正常工

html - 100% 高度 div,由于 margin-top 50px,滚动条离开屏幕 50px。自动溢出

我正在尝试布局一个页面,该页面在顶部和内容区域有一个水平导航栏,当内容太大时将获得滚动条。我目前的做法是将div宽度设置为100%;高度50px;绝对位置;前0;离开0;然后是高度为100%的第二个div;宽度100%;边距顶部50px;溢出:自动;然而,出现的滚动条偏移了50px边距,因此将内容推离了页面底部。如果我删除边距,一切正常,但它会将内容放在导航栏后面。我还尝试将它包装在一个容器中,并尝试将它们的边距和溢出部分放在child身上,但这似乎仍然没有达到所需的效果。jsFiddle,带有注释以尝试更好地解释它。http://jsfiddle.net/Piercy/hggXJ/H

html - 100% 高度 div,由于 margin-top 50px,滚动条离开屏幕 50px。自动溢出

我正在尝试布局一个页面,该页面在顶部和内容区域有一个水平导航栏,当内容太大时将获得滚动条。我目前的做法是将div宽度设置为100%;高度50px;绝对位置;前0;离开0;然后是高度为100%的第二个div;宽度100%;边距顶部50px;溢出:自动;然而,出现的滚动条偏移了50px边距,因此将内容推离了页面底部。如果我删除边距,一切正常,但它会将内容放在导航栏后面。我还尝试将它包装在一个容器中,并尝试将它们的边距和溢出部分放在child身上,但这似乎仍然没有达到所需的效果。jsFiddle,带有注释以尝试更好地解释它。http://jsfiddle.net/Piercy/hggXJ/H

css - 在全屏 div 中居中基于百分比的 div

我知道margin-top的百分比是相对于宽度的...这就是为什么我不能总是垂直和水平居中一个高度为全屏50%和宽度为50%的div。http://jsfiddle.net/8BJ94/调整大小时,margin-top是相对于宽度的CSS#mini{height:50%;width:50%;background-color:#FFFFFF;margin-top:25%;margin-left:25%;} 最佳答案 演示http://jsfiddle.net/8BJ94/1/代码#hello{position:absolute;wid

css - 在全屏 div 中居中基于百分比的 div

我知道margin-top的百分比是相对于宽度的...这就是为什么我不能总是垂直和水平居中一个高度为全屏50%和宽度为50%的div。http://jsfiddle.net/8BJ94/调整大小时,margin-top是相对于宽度的CSS#mini{height:50%;width:50%;background-color:#FFFFFF;margin-top:25%;margin-left:25%;} 最佳答案 演示http://jsfiddle.net/8BJ94/1/代码#hello{position:absolute;wid

html - div 内 h1 元素的边距

我有一个div容器,里面有一个h1元素:EnlightenDesigns我已经对页眉元素应用了margin-top、margin-left和margin-right。但是,margin-top并未应用于包含div的标题元素框。相反,上边距应用于包含的div。页眉的左右边距应用于包含div的页眉元素框。div和header的样式规则如下:#header{background:blue;height:150px;}h1{background:orange;margin-top:30px;margin-left:10px;margin-right:10px;}这种行为的原因是什么?

html - div 内 h1 元素的边距

我有一个div容器,里面有一个h1元素:EnlightenDesigns我已经对页眉元素应用了margin-top、margin-left和margin-right。但是,margin-top并未应用于包含div的标题元素框。相反,上边距应用于包含的div。页眉的左右边距应用于包含div的页眉元素框。div和header的样式规则如下:#header{background:blue;height:150px;}h1{background:orange;margin-top:30px;margin-left:10px;margin-right:10px;}这种行为的原因是什么?

html - 为什么两个总计 100% 的 div 会推到下一行?

我正在使用Firefox,当我并排放置两个宽度总计为100%的div元素时,右边的div被推到下一行。当它们总计达到99%时,一切都会按预期进行。Hereisanexample:CSS.body{height:100%;width:100%;}.left{background-color:red;width:70%;height:100%;display:inline-block;}.right{background-color:yellow;display:inline-block;width:30%;height:100%;}}HTMLdd 最佳答案