檬味博客 » 问答 » DIV+CSS，如何实现两列显示？

DIV+CSS，如何实现两列显示？

DIV+CSS，实现两列显示,我们只需要写好3个div，一个总的div包裹着其他的2个，然后在分别设置好他们宽高，在使用一个margin让他们有个间隔，margin 的用法，如图：最好是在加一个border便于我们观察，具体看代码： div1{ width:600px;height:200px;font-size:13px;} div1...
DIV+CSS，如何实现两列显示？
<ul>
<li></li>
<li></li>
</ul>
设置css时，li的float:left;再给它合适的宽度，就行了。试试就能行，争争就能赢！2010-09-04
DIV+CSS，实现两列显示,我们只需要写好3个div，一个总的div包裹着其他的2个，然后在分别设置好他们宽高，在使用一个margin让他们有个间隔，margin 的用法，如图：

最好是在加一个border便于我们观察，具体看代码：
<html>
<head>
<style>
#div1{
width:600px;
height:200px;
font-size:13px;

}
#div1 .img{
width:600px;
height:200px;
}

#div1 .wenzi{
width:600px;
height:200px;
margin-top:10px;
}

</head>
<body>
<div id='div1'>
<div class='img'>
<p>测试文字1</p>
</div>
<div class='wenzi'>
<p>测试文字2</p>
</div>
</div>
</body>
</html>
2015-05-28
每小块设置宽度，宽度是区域的一半。
然后float：left2010-08-26
这个很简单，浮动就可以了，比如：
<!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">
.main{ width:800px; height:100px; font-size:12px;}
.left{ width:390px; height:100px; float:left; border:dashed 1px #FF0000}
.right{ width:390px; height:100px; margin-left:8px; float:left;border:dashed 1px #FF0000}
</style>
</head>

<body>
<div class="main">
<div class="left">我是左边</div>
<div class="right">我是右边</div>

</div>
</body>
</html>

一个简单的列子。

我补充一点，你要什么样子的2列左右的？上下的？2010-08-26
float: left/right;2010-08-26
<div style="width=200px;" class=main><div>左列</div><div>右列</div></div>
<style>
.main div{float:left;widht:49%;}
</style>2010-08-26
mengvlog 阅读 37 次 更新于 2025-09-11 06:37:02 我来答关注问题0
6 个回答檬味博客专题活动
  • 宸辰游艺策划 怎么把两个div并列显示

    CSS的Grid布局也可以实现两个div并列显示，同时还可以控制它们的行和列。使用grid容器将子元素进行网格划分，然后通过grid属性来指定每个元素的位置和大小。例如：css .container { display: grid; /* 设置容器为Grid布局 */ grid-template-columns: auto auto; /* 创建两列布局 */ } 这种方法适用于...

  • 百度网友faadf46 怎样让两个div并排显示

    1、首先我们如图所示的web结构即一个html和css即可实现。2、打开html页面 定义一个大的div和两个小div 。3、两个小div的宽度小于等于大div的宽度，即可实现并排了。4、使用position进行绝对定位，然后使用margin-left除去第一个小div的宽度即可。5、用table盒子实现div并排，这个是等宽的。6、使用display...

  • 阿暄生活 div标签怎么左右并排

    为第一个div标签设置长宽均为200px，类命名为“1”。为第二个div标签同样设置长宽均为200px，类命名为“2”。调整div标签的排列方式：默认状态：创建完成后，两个div标签可能是上下并排的状态。设置浮动：双击右边的CSS样式窗口内其中一个div标签的CSS，在CSS窗口中分类选项中找到【方框】，将Float属性...

  • 网海1书生 使用CSS如何让两个div并排显示

    方法一：把div设为“行内块级元素”：div {display:inline-block; border:1px solid #000}第一个div第二个div方法二：使用浮动：div {float:left; border:1px solid #000}br {clear:both}第一个div第二个div

  • 勤奋的小号007 用纯DIV+CSS做一个两行两列的表格,但第二列中两行是合并的,如下面这样

    css代码：.demoBox { width:204px;} .demoBox li { float: left;width:100px;border: 1px solid #999;} .demoBox li.demoLi { width: 202px;} html代码： 1 2 3 总体思路就是利用宽度和浮动来实现...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部