html中如何将两个div并列显示

Posted 2023-04-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html中如何将两个div并列显示相关的知识，希望对你有一定的参考价值。

<html>

<head>

<style>

#e
margin-left:500px;
margin-top:230px;
font-style:italic;
text-align:center;

</style>

</head>

<body background="lann.jpg">

<div id="e">

<div id="d" style="float:left">

<h2 class="tit" style="color:#000000">站点管理</h2>

<ul>
<li><h3><a href="" style="color:#000000">站点添加</a></h3></li>

<li><h3><a href="" style=" color:#000000 ">站点修改</a></h3></li>

<li><h3><a href="" style="color:#000000">站点删除</a></h3></li>
</ul>
</div>

<div id="c" style="float:right" >

<h2 class="tit2" style="color:#000000">线路管理</h2>

<ul>
<li><h3><a href="" style="color:#000000" >线路添加</a></h3></li>

<li><h3><a href="" style="color:#000000">线路修改</a></h3></li>

<li><h3><a href="" style="color:#000000">线路删除</a></h3></li><br/>

</li>
</ul>
<h2 class="tit2" style="color:#000000">关于</h2>

</div>
</div>

结果显示是这样，我想让站点管理和线路管理并列显示在“公交查询小助手”下面，这样看着好看，请问该如何实现，html也贴了出来，大家看看。

参考技术A 并排的话，你需要使用CSS的float属性，然后在设置浮动；
比如
<div style="widht:500px">
<div style="float:left;width:200px">左</div>
<div style="float:left;width:200px">右</div>
</div>
这样，这个两个DIV标签就在同一行上了（同时靠左），当然有个前提，就是他们俩的父元素的宽度要至少大于400px，这样才能在同一行上。这个结果是两个DIV的右侧会空出100PX的空白
<div style="widht:500px">
<div style="float:left;width:200px">左</div>
<div style="float:right;width:200px">右</div>
</div>
以上写法，也是在同一行。不同的是，一个靠左，一个靠右。
这里边的两个DIV的中间有100PX的空白。参考技术B 把id为c的DIV设左浮动就OK了。（你设了右浮动。。。）这句应该这样写：<div id="c" style="float:left" >。参考技术C 直接设置2个div 左浮动就可以了。追问

的确是，能不能控制他们两个之间的距离，设置为左浮动之后距离太近了，请问可以不。

追答

当然可以的，只要你明白css中盒模型的原理就简单。
marging外部距离
padding内部距离

追问

css不是很懂，我现在弄成这样了，只要间距大一点就行了，但没成功。

追答

那就设置margin:0 10px; 如何10px不够那就再增加就可以了。知道你满意为止

本回答被提问者采纳参考技术D ①两个div style=float:left
②两个div style=display:inline-block;vertical-align:top（不一定兼容所有浏览器，获得像按钮一样的属性）

上面两个方法右边的div还要margin-left:**px或padding-left:**px，效果看看起来就不那么近了。

③绝对定位，不推荐。

还有，你把“关于”扩到右边的div里面了，感觉看起来有点不太好。追问

谢谢，这点我也意识到了，正杂努力的改，谢谢了！但没该成功，改成如下，但距离还是如此。

第5个回答 2013-08-15 <html>

<head>

<style>

#e
margin-left:500px;
margin-top:230px;
font-style:italic;
text-align:center;

</style>

</head>

<body background="lann.jpg">

<div id="e">

<div id="d" style="float:left">

<h2 class="tit" style="color:#000000">站点管理</h2>

<ul>
<li><h3><a href="" style="color:#000000">站点添加</a></h3></li>

<li><h3><a href="" style=" color:#000000 ">站点修改</a></h3></li>

<li><h3><a href="" style="color:#000000">站点删除</a></h3></li>
</ul>
</div>

<div id="c" style="float:left" >

<h2 class="tit2" style="color:#000000">线路管理</h2>

<ul>
<li><h3><a href="" style="color:#000000" >线路添加</a></h3></li>

<li><h3><a href="" style="color:#000000">线路修改</a></h3></li>

<li><h3><a href="" style="color:#000000">线路删除</a></h3></li><br/>

</li>
</ul>
<h2 class="tit2" style="color:#000000">关于</h2>

</div>
</div>

div+css 我是一个div里带了两个div，两个并列的。但是现在的左边是正常的，右边就是不上去不知道为啥？

宽度没有超过最外面的div的宽度。想知道都有什么情况会出现这种状况？请教各位。。

代码：

#middle

float:left;

width:100%;

padding-top:10px;

min-height:680px;

#left

float: left;

width: 209px;

border:#cccccc 1px solid;

#right

width:750px;

float:right;

border:#000000 1px solid;

参考技术A 你看下是不是#middle 的宽度小于#left+#right 的宽度
如果小于的话，right就会被挤下来，如果你用%来定义宽度的话应该就没问题了

可以加个属性：overflow:hidden
在#middle容器里 #left，#right 下边清楚下样式<div style="clear:both;height:0px;font-size:0px;"></div> 参考技术B 把#right样式改成这个
#right
width:750px;
float:left;
border:#000000 1px solid;

让左右两个div的浮动都设为float:left 参考技术C IE6有双边距BUG.还有border也要算进去.你盒子模型还不是很明白.多钻研一下.~追问

我没用ie6，用的火狐做看的也这样。。border算进去了

追答

你是左右还是左中右啊.我看上面CSS里是三个层.你图片上是两个层. 适当的把那层宽缩小试试.不行加上背景色看一下.IE6下出这种的话加上display:inline

追问

左右。三个一个是最外面的两个是里面并列的。。层宽远小于最外面的

追答

细心一点.检查一下代码.

我写的与你的差不多的.没错的

sfsfsfsf
sasdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffsfsfsf

本回答被提问者采纳参考技术D 看你的html什么样子的追问

html

overflow: -moz-scrollbars-vertical;

margin: 0;

padding: 0;

追答

.....我是说页面html 代码啊、、看看是怎么布局的、、、、你把页面所有代码都贴出来吧、、如果你就一个div里面嵌套这左右两个div的话是不能出现那样的情况的

追问