DIV+CSS一行三列代码如何写?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DIV+CSS一行三列代码如何写?相关的知识，希望对你有一定的参考价值。
如题:在html用Dreamweaver写出来如下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body
margin:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #000000;
-->
</style>
</head>
<body>
<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="320"><script language="javascript" type="text/javascript" src="HeadTime.js"></script>
</td>
<td width="330"><table width="320" border="0" cellpadding="0" cellspacing="0" style="border:#00FFFF 1px solid;">
<tr>
<td width="320" style="background:#BFF7FB"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td width="330" align="right"><table width="320" border="0" cellpadding="0" cellspacing="0" style="border:#00FFFF 1px solid;">
<tr>
<td style="background:#BFF7FB"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
解决问题加分.
<div>
<div class=“left”><!-----左边盒子----->
<ul>
<li>条目1</li>
<li>条目2</li>
<li>条目3</li>
……
</ul>
</div>
<div class=“middle”><!-----左边盒子----->
<ul>
<li>条目1</li>
<li>条目2</li>
<li>条目3</li>
……
</ul>
</div>
<div class=“right”><!-----右边边盒子----->
<ul>
<li>条目1</li>
<li>条目2</li>
<li>条目3</li>
……
</ul>
</div>
</div>
需要注意：1）同列的这三个盒子，使用float浮动：如，float：left；这样就可以在一行排列顺次排列。
也可以对left盒子使用float：left；，右边的盒子使用float：right；
2）最外边的div盒子的宽度要大于同列的3个盒子总宽度，如果小了，则会被挤下来，不是在一行中显示。 参考技术A <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
body
margin:0;
padding:0;
#container
font-size:12px;
width:980px;
margin:auto;
#left,#middle,#right
float:left;
#left
width:320px;
#middle,#right
width:330px;
#middle ul,#right ul
border:1px solid #00FFFF;
width:320px;
margin:0;
padding:0;
list-style-type:none;
.header
background:#BFF7FB;
</style>
</head>
<body>
<div id="container">
<div id="left">
<script language="JavaScript" type="text/javascript" src="HeadTime.js"></script>
</div>
<div id="middle">
<ul>
<li class="header">123</li>
<li>123</li>
</ul>
</div>
<div id="right">
<ul>
<li class="header">123</li>
<li>123</li>
</ul>
</div>
</div>
</body>
</html>本回答被提问者和网友采纳 参考技术B 3个DIV全部左浮动即可。望采纳 参考技术C
最简单的方法就是用表格。
<table><tr><td>内容1</td><td>内容2</td><td>内容3</td></tr>
</table> 参考技术D 没个div的样式 用float: left;
如用css如何实现下图的布局
这个怎么写？？？
<div class="left">
<div class="first"></div>
<div class="second"></div>
</div>
<div class="third"></div>
以上是关于DIV+CSS一行三列代码如何写?的主要内容，如果未能解决你的问题，请参考以下文章
初学css盒子模型，对于盒子的使用不是很明白，请问这样的盒子布局怎么写？
div css 设置三列,左右固定宽度，中间自定义宽度，代码如下。 <div class="footer"> <div class="footer-l