如何让css浮动属性与四个div一起工作？
如何让css浮动属性与四个div一起工作？我有四个div我想以布局为例得到algin如何让css浮动属性与四个div一起工作？,css,Css,如何让css浮动属性与四个div一起工作？我有四个div我想以布局为例得到algin div One - div two div Three - div Four 下面是我尝试使用以下css和html代码但没有正确排列的内容 <HTML> <HEAD> <TITLE>Layout Example</TITLE>
div One - div two
div Three - div Four
<HTML>
<HEAD>
<TITLE>Layout Example</TITLE>
<link rel="stylesheet" type="text/css" href="file:///C:/app3/css/custom-theme/jquery-ui-1.8.16.custom.css">
<SCRIPT type="text/javascript" src="jquery-1.6.2.min.js"></SCRIPT>
<style>
.divs
{
width: 200px;
height: 200px;
}
#one
{
background-color: black;
float: left;
color: white;
}
#two
{
background-color: blue;
float: left;
}
#three
{
background-color: red;
float: none;
}
#four
{
background-color: green;
float: none;
}
</style>
</HEAD>
<BODY>
<div id="one" class="divs"> One </div>
<div id="two" class="divs"> Two</div>
<div id="three" class="divs"> Three </div>
<div id="four" class="divs"> Four </div>
</BODY>
</HTML>
布局示例
.分区
{
宽度：200px；
高度：200px；
}
#一个
{
背景色：黑色；
浮动：左；
颜色：白色；
}
#两个
{
背景颜色：蓝色；
浮动：左；
}
#三
{
背景色：红色；
浮动：无；
}
#四
{
背景颜色：绿色；
浮动：无；
}
一个
两个
三
四
浮动：左和清除：两个（或清除：左）第三个元素
.divs
{
width: 200px;
height: 200px;
float: left;
}
#one
{
background-color: black;
color: white;
}
#two
{
background-color: blue;
}
#three
{
background-color: red;
clear: both;
}
#four
{
background-color: green;
}
另一种选择是制作一个总高度/宽度为400px的#容器，然后将.divs
设置为高度/宽度为50%
：
<div id="container">
<div id="one" class="divs"> One </div>
<div id="two" class="divs"> Two</div>
<div id="three" class="divs"> Three </div>
<div id="four" class="divs"> Four </div>
</div>
#container {
width: 400px;
height: 400px;
}
.divs
{
width: 50%;
height: 50%;
float: left;
}
#one
{
background-color: black;
color: white;
}
#two
{
background-color: blue;
}
#three
{
background-color: red;
clear: left;
}
#four
{
background-color: green;
}
一个
两个
三
四
#容器{
宽度：400px；
高度：400px；
}
.分区
{
宽度：50%；
身高：50%；
浮动：左；
}
#一个
{
背景色：黑色；
颜色：白色；
}
#两个
{
背景颜色：蓝色；
}
#三
{
背景色：红色；
清除：左；
}
#四
{
背景颜色：绿色；
}
您需要在#two
和float:left中使用clear:right
和四个
中的code>。以下是更正后的代码：
<HTML>
<HEAD>
<TITLE>Layout Example</TITLE>
<link rel="stylesheet" type="text/css" href="file:///C:/app3/css/custom-theme/jquery-ui-1.8.16.custom.css">
<SCRIPT type="text/javascript" src="jquery-1.6.2.min.js"></SCRIPT>
<style>
.divs
{
width: 200px;
height: 200px;
}
#one
{
background-color: black;
float: left;
color: white;
}
#two
{
background-color: blue;
float: left;
}
#three
{
background-color: red;
float: left;
clear: both;
}
#four
{
background-color: green;
float: left;
}
</style>
</HEAD>
<BODY>
<div id="one" class="divs"> One </div>
<div id="two" class="divs"> Two</div>
<div id="three" class="divs"> Three </div>
<div id="four" class="divs"> Four </div>
</BODY>
</HTML>
布局示例
.分区
{
宽度：200px；
高度：200px；
}
#一个
{
背景色：黑色；
浮动：左；
颜色：白色；
}
#两个
{
背景颜色：蓝色；
浮动：左；
}
#三
{
背景色：红色；
浮动：左；
明确：两者皆有；
}
#四
{
背景颜色：绿色；
浮动：左；
}
一个
两个
三
四
Demo:Thatfloat:left
看起来有点重复。您确定右侧元素上有clear
吗？是的，您是右侧float:left
看起来重复，但clear:right
是否有任何问题？我不确定，但我认为两者的作用相同。我希望在#two
的右侧不存在div，同样，您希望在#two
的左侧不存在div。有什么好处吗？看看我答案中的第一把小提琴。然后看看这个：（事实上它应该是clear:left
或clear:both
）。