相关疑难解决方法(0)
流体宽度等间距DIV
我有一个流体宽度的容器DIV.
在这个我有4个DIV全部300px x 250px ...
<div id="container">
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>
<div class="box4"> </div>
</div>
我想要发生的是箱子1向左浮动,箱子4向右浮动,箱子2和3在它们之间均匀间隔.我希望间距也是流畅的,因此随着浏览器变小,空间也变小.
324
推荐指数
推荐指数
4
解决办法
解决办法
21万
查看次数
查看次数
CSS:自动调整div大小以适应容器宽度
我有两个<div>:左和内容.这两个是内部包装 div min-width:960px;.left有固定的宽度,但是我希望内容灵活,最小宽度为700px,如果屏幕较宽,请将其粘贴到屏幕的右边界.
CSS:
#wrapper
{
min-width:960px;
margin-left:auto;
margin-right:auto;
}
#left
{
width:200px;
float:left;
background-color:antiquewhite;
margin-left:10px;
}
#content
{
min-width:700px;
margin-left:10px;
width:auto;
float:left;
background-color:AppWorkspace;
}
JSFiddle:http://jsfiddle.net/Zvt2j/
19
推荐指数
推荐指数
2
解决办法
解决办法
16万
查看次数
查看次数
灵活的缩略图网格与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> …9
推荐指数
推荐指数
1
解决办法
解决办法
5682
查看次数
查看次数
文本对齐:证明不能处理动态创建的内容
我试图使用文本对齐:证明并显示:inline-block的在描述这个帖子的风格一些动态创建的元素.在我的头撞墙检查CSS冲突之后,我终于意识到在创建内容之后没有重新评估对齐.我想知道是否有人知道这方面的解决方法.有没有办法强制在动态创建的元素上重新评估样式？
编辑 - HTML:
<div id="container" class="flush">
</div>
<div class="flush">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS:
.flush{
text-align: justify;
width: 500px;
height: 250px;
background: #00f;
}
.flush div{
display: inline-block;
width: 101px;
height: 100px;
background: #f00;
}
JS:
for(var i = 0; i<5; i++){
$('#container').append("<div></div>");
}
这是一个jsfiddle示例来说明.注意硬编码元素是如何对齐的,而动态创建的元素则不是.
5
推荐指数
推荐指数
1
解决办法
解决办法
1420
查看次数
查看次数
如何证明一行中有4个div
我有HTML/CSS布局问题:
我有4个具有相同宽度和高度的div.我想"为他们辩护",所以应该从一侧到另一侧放置它们之间相同的空间.换句话说:假设A,B,C,D是div和"|" 表示行的开始/结束.所以我希望在一行中获得3个div的效果:
|A B C D|
怎么做.我能用3个div来做,但如何用4个div做到这一点？
-2
推荐指数
推荐指数
2
解决办法
解决办法
1万
查看次数
查看次数