神马品牌网高速切削的定义:css 三列布局问题，请教大师~
来源：百度文库 编辑：神马品牌网 时间：2024/04/28 07:01:07
我用css将三个div布局成三列（在一行），他们的设定分别为：
.content {
width: 763px;
margin-top: 2px;
}
.left_2 {
background-color: #EBEBEB;
width: 200px;
margin-top: 5px;
position: relative;
float: left;
}
.mid_2 {
background-color: #0099FF;
width: 312px;
float: left;
margin-top: 5px;
margin-left: 3px;
}
.right_2 {
background-color: #FF7171;
float: left;
margin-top: 5px;
margin-left: 3px;
width: 243px;
}
在这三个div前面还2个div（在一行）
代码是： <div class="content">
<div class="left_1">dh</div>
<div class="right_1">d</div>
<div class="left_2"></div>
<div class="mid_2"></div>
<div class="right_2"></div>
</div>
为什么我的right_2这个div在浏览的时候是正常排列的（在一行），而在编辑的时候就跑到"mid_2"和"left_2"的下面去了？
请问，我这样布局对吗?我应该怎么布局，才能在编辑和浏览的时候使那三个div排成一行？
.content {
width: 763px;
margin-top: 2px;
}
.left_2 {
background-color: #EBEBEB;
width: 200px;
margin-top: 5px;
position: relative;
float: left;
}
.mid_2 {
background-color: #0099FF;
width: 312px;
float: left;
margin-top: 5px;
margin-left: 3px;
}
.right_2 {
background-color: #FF7171;
float: left;
margin-top: 5px;
margin-left: 3px;
width: 243px;
}
在这三个div前面还2个div（在一行）
代码是： <div class="content">
<div class="left_1">dh</div>
<div class="right_1">d</div>
<div class="left_2"></div>
<div class="mid_2"></div>
<div class="right_2"></div>
</div>
为什么我的right_2这个div在浏览的时候是正常排列的（在一行），而在编辑的时候就跑到"mid_2"和"left_2"的下面去了？
请问，我这样布局对吗?我应该怎么布局，才能在编辑和浏览的时候使那三个div排成一行？
那是因为你的编辑程序窗口窄了一些，不能同时将三个div显示在一行吧……应该没事的，浏览器上没问题就行了。
ps: 如果你是想做个整齐的表格，建议用 <table>。
使用表格看看
<div id="divLeft">Contents of divLeft</div>
<div id="divRight">
<div id="divCenter">Contents of divCenter</div>
Contents of divRight
</div>
divLeft 与 divCenter 的 float 均为 left
divRight 的 float 为 right