我正在使用它
.align-left {
float: left;
width: 49%;
}
.align-right {
float: right;
width: 49%;
text-align: right; /* depends on element width */
}
有了这个html:
<span class="align-left">this shows to the left<span><span class="align-right">this to the right<span>
它在IE/FF中工作正常,但在Chrome中却不行？我不是CSS专家,但我想避免使用表格,任何建议？
我有类似的东西:
<div id="div1">
<div style="float:left;width:100px;height:100px;"></div>
</div>
并且div1似乎具有0x0大小而不是100x100.为什么？
我正在学习CSS,到目前为止管理了很多个小时后创建一个简单的布局,但仍然不知道如何将内容(文本,块,等等)放在float:left div中.这是代码,我希望有人可以提供帮助,因为我会在很短的时间内坚持下去!
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#container {
/* */
border: 1px solid;
/* */
padding-top: 10px;
margin-left:auto;
margin-right:auto;
width: 980px;
height: auto;
}
#content {
display: inline-block;
}
#content .left {
display: inline-block;
border: 1px solid;
padding-left: 5px;
padding-top: 10px;
width:773px;
float:left;
}
#content .right {
display: inline-block;
padding-top: 10px;
width:200px;
float:right;
}
#content .inside-left {
text-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div class="left"> …假设我有一堆div,它们有"左"类或"右"类.是否有可能使这些div在容器的两侧浮动,就像有一列"左"div和一列"右"div一个在另一个下对齐.div的顺序是随机的.
我不是在寻找双栏布局.;)
我的事实,混淆运用float到li的元素,似乎意味着含ul元素没有的高度.你可以看到这个jsFiddle中演示的问题.
基本上,我想创建一个ul具有任意数量的li元素.我希望每个li元素的宽度为20%,所以最终li每行有五个元素.
我也希望ul元素有一些高度,所以我可以应用底部边框.
如果我在lis 上使用这个类:
.result1 {
width: 20%;
float: left;
}
那么ul它的高度为0.我看过推荐的帖子display: inline-block,但是如果我用它来代替:
.result2 {
width: 20%;
display: inline-block;
}
然后是ul高度,但是lis 之间有空格,所以它们会突破两条线.
这一定是CSS规范中的一些我无法理解的东西.如何在每行中获得五个元素,包含元素的高度？
我有一个我在这里制作的网页:http://jsfiddle.net/KM9HJ/
<!DOCTYPE html />
<head>
<title>Home</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">
<img style="width:50; height:50; float:left;" src="Content/Portal%20Layered.png"/>
<img style="width:50; height:50; position:relative; left:-50px; z-index:2;" src="Content/Blank.png"/>
<div><h2 id="headerh2">Cody Shearer</h2></div>
</div>
<div id="wrapper">
<div style="background-color:#565656">
<div id="links"><a href="Home.htm" class="Home" id="link">HOME</a></div>
<div id="links"><a href="About%20Me.htm" class="AboutMe" id="link">ABOUT ME</a></div>
<div id="links"><a href="Gallery.htm" class="Gallery" id="link">GALLERY</a></div>
</div>
<article id="para">
<p>About This Website</p>
<div id="paraL2"><p>About this page:</p> <div id="paraP">This is</div></div></article>
</div>
</body>
如果您查看"关于此页面:"的div,您会看到它位于div的最右侧,其中一部分被切断(您可能需要调整结果区域的大小才能看到这一点).我想要的话就是留在一条线上并与左边对齐.从我所看到的问题可以通过从#links区域删除"float:left"来解决,或者通过删除"width:150px;"可以稍微帮助一下.来自#link.唯一的问题是我花了很长时间试图得到其他的
嘿伙计们,我试图水平对齐3个盒子,中间有一点白色空间.为此,我尝试使用float:left表示第一个框边距:auto表示中间边框,float:右边表示最后一个框.前两个框显示完全正常,但第三个框在新线上向右浮动.有没有什么办法解决这一问题？谢谢!
HTML:
<div class="boxQ">
<p class="boxText">quality.</p>
</div>
<div class="boxS">
<p class="boxText">speed.</p>
</div>
<div class="boxSim">
<p class="boxText">simplicity.</p>
</div>
CSS:
.boxQ {
float:left;
width:30%;
height:400px;
background-color:#C60;
}
.boxS {
margin: 0 auto;
width:30%;
height:400px;
background-color:#6CC;
}
.boxSim {
float:right;
width:30%;
height:400px;
background-color:#FC6;
}
尝试文本对齐中心和边距自动,两者都不起作用,我不想习惯使用'边缘黑客'进行居中.
.circle{
float: left;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
}
.inner{
float: left;
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #DDD;
}
在以下HTML代码段中,如何使最终段落显示在2个列表下而不是右侧？
<div>
<ul style="float: left;">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ul style="float: left;">
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</div>
<div>
<p>
<!-- why the heck isn't this under the uls?! -->
A final paragraph of text
</p>
</div>
这个HTML也可以在这里找到:http://jsfiddle.net/8f2cE/
此外,我很感激任何背景解释为什么会发生这种行为.IMO这是不一致的,因为默认情况下2 divs是根级别没有display: block;设置任何浮动属性,所以它们不应该从页面的上到下流动为"正常"？
我想以这样一个事实为前言,我知道有,clear: both但我查看某人的代码,他们正在使用两者clear: right和clear: left.这会表现得像clear: both或只会执行一个明确的属性吗？