相关疑难解决方法(0)
如何使用CSS中的动态列和行计数均匀分布浮动元素？
我有多个具有固定宽度和高度的div(想想某种带有文章图片的目录视图).现在我想向他们展示类似于float:left的行为.这样可以确保浏览器窗口越大,一行中显示的div就越多.
浮动的缺点:左边的解决方案是,右侧有一个很大的白色间隙,直到另一个div适合.现在我的工作是在页面上均匀地分配div,而不是右侧的大白色间隙,单个div之间应该有均匀分布的间隙.
JavaScript中的解决方案很简单:http://dl.dropbox.com/u/2719942/css/columns.html
您可以看到,如果您调整浏览器窗口的大小,它的行为类似于float:left,但空间均匀分布在框之间.使用JavaScript动态计算列数和行数:
function updateLayout() {
var boxes = document.getElementsByClassName('box');
var boxWidth = boxes[0].clientWidth;
var boxHeight = boxes[0].clientHeight;
var parentWidth = boxes[0].parentElement.clientWidth;
// Calculate how many boxes can fit into one row
var columns = Math.floor(parentWidth / boxWidth);
// Calculate the space to distribute the boxes evenly
var space = (parentWidth - (boxWidth * columns)) / columns;
// Now let's reorder the boxes to their new positions
var col = 0;
var row = 0;
for …推荐指数
解决办法
查看次数
如何在不使用margin-left的情况下集中5个div？
我想在a里面调整5个div div,就像这样:
有没有办法这样做而不使用margin-left？
我的意思是..如果我想消除其中一个中间div并且它们仍然是对齐的？例如..如果我删除div4,其他人将自动居中.像这样:
我找到了这样的解决方案:
#parent {
width: 615px;
border: solid 1px #aaa;
text-align: center;
font-size: 20px;
letter-spacing: 35px;
white-space: nowrap;
line-height: 12px;
overflow: hidden;
}
.child {
width: 100px;
weight: 100px;
border: solid 1px #ccc;
display: inline-block;
vertical-align: middle;
}
但问题是:第一个div和最后一个必须像浮左和向右浮动......而这个解决方案将每件事都集中在这样的事情上:
推荐指数
解决办法
查看次数
如何使用CSS在柔性宽度设计中设置自动边距框？
我有灵活宽度设置的DIV,例如最小宽度:800px和最大宽度:1400px.在这个DIV中,有许多框的固定宽度为200px并且显示:内联块.因此,根据父DIV宽度,这些框填充整个空间.
我的问题是右侧的空白区域是由父div的可变宽度引起的.有时这个空白区域很小并且看起来很好,但是父div的宽度不同,这个空白区域几乎是200px.
我不知道,如果我详细描述了我的问题,我希望这张照片有助于描述我的实际情况:
这就是我想要的:
使用TABLE可以轻松实现此自动边距.但是,我不知道确切的列数,因为它取决于用户的屏幕分辨率.所以我不能使用表而是坚持使用CSS.
任何人都知道如何解决这个问题？提前感谢您的意见和解答.
编辑:我不需要IE6的支持.我想支持IE7,但IE7是可选的,因为我知道有限制所以我可能会在IE7中使用固定宽度的"div.wrapper"
EDIT2我需要处理这些框的多行,因此它们不会超过"div.wrapper"框并正确地包装在多行框中,而不仅仅是在一条长行中.
EDIT3我不知道"列"的数量,因为这取决于用户的屏幕分辨率.所以在大屏幕上可以有一排7个盒子,而在小屏幕上,一排可能只有4个盒子.所以我需要的解决方案不会在一行中设置固定数量的方框.相反,当盒子不适合一行时,它们应该只包裹到下一行.
推荐指数
解决办法
查看次数
间隔均匀的列表项
我的任务是生成一个如下所示的水平导航列表:
关键是物品需要从绝对的左右分开.
设置宽度很痛苦,因为不同的浏览器似乎对它们的解释不同.此外,此列表中的项目数将根据用户而变化.
任何意见,将不胜感激!
按照@Dean的建议,我发现自己的下面 - 这是非常正确的.我唯一想到的是左边的两个元素不幸的是短,因此差距很大.我希望客户对文本对齐感到满意; 在所有元素的中心,侧面有一些填充物!
推荐指数
解决办法
查看次数
父div中空间div(每个宽度不同)的均匀度如何？
我已经看到这种解决方案可以均匀地间隔DIV :( 流体宽度具有相等间距的DIV)但是它要求DIV都具有相同的宽度.这在我的情况下不起作用.我有5个DIV,它们都有不同的宽度,并且想要均匀地放置它们.这可能没有JavaScript吗？
例如:
<!-- The text should not wrap, but be on one line for each div -->
<div class="item" id="item1">Item One</div>
<div class="item" id="item2">Item # Two</div>
<div class="item" id="item3">Item Three</div>
<div class="item" id="item4">Item Four</div>
<div class="item" id="item5">Item Five, the Last</div>
我需要它在IE8 +,Firefox 4 +,Chrome,Safari中工作.
编辑:另一个要求:div应该在最后一个DIV的右边或第一个DIV的左边没有空格.因此它们之间的空白等于它们的宽度之和与容器div的宽度之间的差异.
推荐指数
解决办法
查看次数
灵活的缩略图网格与CSS
我试图在屏幕上放置缩略图,甚至是"填充".这是一个说明问题的图像:
<!DOCTYPE html>
<html>
<head>
<title>Test rows</title>
<style type="text/css">
body {
background: #121212;
color: #fff;
}
#Container {
background: #585858;
margin: 0 auto;
min-width: 1024px;
width: 85%;
margin-top: 50px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#Container a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}
</style>
</head>
<body>
<div id="Container">
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> …推荐指数
解决办法
查看次数
如何同时使瓷砖居中并左对齐
我有一个瓷砖(或div)的容器,我希望容器居中,而瓷砖在容器中左对齐.
所以如果窗口很小:
..[s][s][s]..
..[s][s].....
如果窗口稍微加宽:
...[s][s][s]...
...[s][s]......
进一步:
.[s][s][s][s].
.[s]..........
我试过了:
#container's-parent: { display: block; text-align: center; }
#parent: { display: inline-block; text-align: left; }
.tiles: { display: inline-block }
但这似乎不起作用.
我希望至少在Chrome中使用它,但我还需要最终支持最新的FF,Safari和IE 10+
推荐指数
解决办法
查看次数
如何在可变宽度父级(多行)中均匀分隔元素？
所以我在我的网站上有一个UL,有大约30个列表项,每个列表项包含一个大约130px的图标,所以列表扩展到多行.
我遇到的问题很难解释如此恶意尝试使用这个jsfiddle.
ul {
display: table; margin: 10px auto;
}
li {
float: left; list-style: none; margin-left: 5px; padding: 5px 0;
}
li a {
background: #82B5DA;
border: 1px solid #599CCE;
border-radius: 3px;
padding: 5px; color: #333;
text-decoration: none;
}
所以我想要的是每个列表项之间的空间是动态的,并使其远远接触屏幕边缘的列表项而不是出现间隙,直到有足够的空间用于新的列表项.一旦有足够的空间让另一个列表项进入该行,则重置项之间的宽度.
恢复,转过来:
|[aaaaaaaaa][bbbbbbbbbb][cc] |
|[dddddddddddddddddddbb][eeeee] |
在这:
| [aaaaaaaaa] [bbbbbbbbbb] [cc] |
| [dddddddddddddddddddbb] [eeeee]|
希望这是有道理的,如果这在某种程度上不正确,那么在这里发布的新内容如此道歉.
推荐指数
解决办法
查看次数
如何在div内均匀分配元素？
我必须将几个元素均匀且流畅地放在另一个div中,如下所示:
我已经在(/sf/answers/481629501/)中看到了使用text-align:justify的技巧,但是给定一个或两个元素,它在右/左侧放置(对齐)为如下所示:(这不是我要找的).
任何帮助将不胜感激.
推荐指数
解决办法
查看次数
IE中的css calc函数错误
编辑
正如@Joe在他的回答中所指出的,IE中的问题与媒体查询无关.
因此,我更新了旧标题:("IE中的媒体查询GLITCH")与当前标题.(还要感谢一些meta建议)
可以肯定的是,我创建了一个只包含calc函数的新FIDDLE,并且看得很低 - 我在IE中看到了与我在原始媒体查询中所做的相同(不良)行为.
另外,我注意到的一个有趣的观察是,这只发生在我在calc操作中使用除法时,但如果我使用更简单的东西calc(100% - x px)- IE处理它就好了.
我media queries用来证明一个盒子的清单.
基本上,我为每个#columns状态设置了一个媒体查询,然后我用它calc()来计算每个元素的margin-right(除了最后一列中的那些元素).
这是小提琴
现在这在chrome和firefox中运行良好 - 但是当我在IE9 +中运行它时
我看到媒体查询状态之间的故障(包括闪烁和不遵守媒体查询).
这是我正在谈论的截图
[在浏览器窗口宽度为710px时截图]:
这是一个IE错误还是我做错了什么？
推荐指数
解决办法
查看次数
标签 统计
css ×10
html ×9
css3 ×5
fluid-layout ×2
html5 ×1
javascript ×1
list ×1
navigation ×1
positioning ×1
rounding ×1