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

<html><head><style>#e{margin-left:500px;margin-top:230px;font-style:italic;text-align... <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也贴了出来，大家看看。展开

 我来答

5个回答

#热议# 空调使用不当可能引发哪些疾病？

回忆526
推荐于2017-09-07 · TA获得超过4165个赞

知道大有可为答主

回答量：3276

采纳率：87%

帮助的人：1885万

我也去答题访问个人页

关注

展开全部

并排的话，你需要使用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的空白。

已赞过 已踩过<

评论收起

华为云

广告2024-11-30

网站建设，华为云模板建站，3000+模板，60+行业覆盖，PC+移动自适应建站，仅需368元/年华为云建站，全程1v1管家式服务，不满意全额退，多端合一，全场景覆盖

www.huaweicloud.com

雨要诀
2013-08-15 · 超过18用户采纳过TA的回答

知道答主

回答量：54

采纳率：0%

帮助的人：39.2万

我也去答题访问个人页

关注

展开全部

把id为c的DIV设左浮动就OK了。（你设了右浮动。。。）这句应该这样写：<div id="c" style="float:left" >。

已赞过 已踩过<

评论收起

百度网友b9189da80
2013-08-15 · 超过11用户采纳过TA的回答

知道答主

回答量：54

采纳率：0%

帮助的人：35.4万

我也去答题访问个人页

关注

展开全部

直接设置2个div 左浮动就可以了。

更多追问追答

追问

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

追答

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

本回答被提问者采纳

已赞过 已踩过<

评论收起

好求知
2013-08-15 · TA获得超过6515个赞

知道大有可为答主

回答量：966

采纳率：80%

帮助的人：1167万

我也去答题访问个人页

关注

展开全部

①两个div style=float:left
②两个div style=display:inline-block;vertical-align:top（不一定兼容所有浏览器，获得像按钮一样的属性）

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

③绝对定位，不推荐。

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

追问

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

已赞过 已踩过<

评论收起

方皖祎j9
2013-08-15 · TA获得超过2913个赞

知道小有建树答主

回答量：615

采纳率：50%

帮助的人：253万

我也去答题访问个人页

关注

展开全部

<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>