HTML中如何让两个div并排显示，举个例子

Posted

tags:

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

在html中让两个div并排显示，通常情况下有三种实现方式，包括:

（1）设置为行内样式，display:inline-block

（2）设置float浮动

（3）设置position定位属性为absolute

以下为三种方式的具体实现代码：

1、设置每个div的展现属性为行内样式，示例代码为：

<div class="app">

<div style="display:inline-block;background:#f00;">div1</div>

<div style="display:inline-block;background:#0f0;margin-left:10px;">div2</div>

</div>

2、设置float浮动，示例代码为：

<div class="app">

<div style="float:left;background:#f00;">div1</div>

<div style="float:left;background:#0f0;margin-left:10px;">div2</div>

</div>

3、设置position定位属性为absolute, 示例代码为：

<div class="app">

<div style="position: absolute;width:100px;background:#f00;">div1</div>

<div style="position: absolute;left:100px;background:#0f0;margin-left:10px;">div2</div>

</div>

扩展资料：

css清除浮动方法

（1）添加新的元素 、应用 clear：both

.clear

clear: both; 

height: 0;

height: 0;

overflow: hidden;

（2）父级div定义 overflow: auto

.over-flow

overflow: auto;

zoom: 1; //处理兼容性问题

（3）伪类  :after 方法  outer是父div的样式

.outer zoom:1;     /*==for IE6/7 Maxthon2==*/

.outer :after

clear:both;

content:'.';

display:block;

width: 0;

height: 0;

visibility:hidden; 

参考资料来源：CSS官方文档：css-float

参考资料来源：CSS官方文档：css-Positioning

 参考技术A

　　可以采用浮动的方法，只要宽度足够，两个div就可以在一排显示。打div里面包含两个小div。

　　方法如下：

　　1、创建一个大div。

　　代码如下：

　　#main  float:left;border:1px   width:100%;  

　　2、创建一个左边小div

　　代码如下：

　　#leftfloat:left;border:1px   width:40%;  

　　3、创建一个右边小div

　　代码如下：

　　#right float:left;border:1px   width:40%;  

　　4、制作成css文件，或者直接添加到网页上，就可以实现并排显示。

 参考技术B

让两个Div并排显示的方法有很多，使用display的inline属性、通过设置float来让Div并排显示都可以实现。

以下为3种方法和例子：

一、使用display的inline属性， 代码如下:

<div style="width:300px; height:auto; float:left; display:inline">AAAA</div> 

<div style="width:300px; height:auto; float:left; display:inline">BBBB</div> 

二、通过设置float来让Div并排显示 ，代码如下:

<style> 

#left,#right float:left;border:1px solid red; padding:10px; 

</style> 

<div id= "main "> 

<div id= "left "> 1111 </div> 

<div id= "right "> 2222 

2222 

2222 </div> 

<!-- 如果不用clear属性可能会出现浏览器不兼容问题,clear设这元素周围没有浮动元素 --> 

<div style="clear:both"></div> 

</div> 

三、对于两个div并排，左边为绝对宽度，右边为相对宽度的，需要用到这种布局的情况比较多见，如左边为导航，右边为内容的页面 。

1、将最大的容器padding-left固定宽度，左边的固定宽度的一块position:absolute，然后right的一块width为百分百 

2、 使用position:absolute。代码如下：

<style> 

body margin:0; height:100% 

html height:100% /*兼容firefox的div高度100%*/ 

#left position:absolute; top:0; left:0; width:200px; height:100%; background-color:#CCCCCC 

#right margin-left:200px; height:100%; background-color:#0099FF 

</style> 

<div id="left">left</div> 

<div id="right">right</div> 

 参考技术C

例子如下：

（1）先创建一个大div。

代码如下：
#main float:left;border:1px width:100%;
（2）创建一个左边小div
代码如下：
#leftfloat:left;border:1px width:40%;
（3）创建一个右边小div
代码如下：
#right float:left;border:1px width:40%;
（4）制作成css文件，或者直接添加到网页上，就可以实现并排显示

这是采用浮动的方法，如果你的div没有并排显示，那么你要注意宽度，因为只要宽度足够，两个div就可以在一排显示。打div里面包含两个小div。

你可以先用DIV定义一个层，然后在层里给两个图片有浮动属性，这样就不会发生图片跑到下一行去了，

div盒子本身默认样式属性是独占一行，而解决div独占一行方法通常有两种，一种为设置浮动，另外一种为设置display样式。接下来是另一种呢方法。

    我们加入display:inline即可解决实现同行并排显示div盒子对象。

    对div标签设置div display:inline样式，

    为了区别其他不需要设置横向排列显示div盒子对象，我们对相邻需要同排显示的div盒子统一加粗css类，css命名为".div-inline"。

 参考技术D

主要有三种方法：

    使用display的inline属性 

    通过设置float来让Div并排显示 

    对于两个div并排，左边为绝对宽度，右边为相对宽度的，需要用到这种布局的情况比较多见，如左边为导航，右边为内容的页面

    将最大的容器padding-left固定宽度，左边的固定宽度的一块position:absolute，然后right的一块width为百分百

    使用position:absolute

在 HTML 页面上并排显示两个图像

【中文标题】在 HTML 页面上并排显示两个图像【英文标题】：Display two images side by side on an HTML Page 【发布时间】：2011-02-19 19:48:50 【问题描述】：

我正在尝试并排放置两个相同尺寸的图像。如果我使用table，那么我可以并排显示两个图像。但是在我的 CSS 样式表中，我为表格使用了自定义格式，这也显示在包含图像的页面上。

我只想显示没有任何自定义背景、边框等的两个图像。

我尝试使用div、span、ul 和li（等），但在每种情况下都失败了。

    如何在不使用table 的情况下将两个图像（大小相同）放在一行中？

    如果我必须使用table，那么如何使用 CSS 为我的表格使用两种（或更多）不同的格式？

【问题讨论】：

每个解决方案都可以根据您的需要而有所不同。所以发布你的代码，直到你尝试过。我们只是清楚地说明了这一点。 【参考方案1】：
    你试过float:left吗？ 将不同的类附加到每个表，然后在您的 css 中：
.table_one 背景颜色：#CC0000； .table_two 背景颜色：#00CC00；

【讨论】：

我尝试过使用 float:left。我也忘了在我原来的问题中提到，但是当我使用“表格”时，它会增加一个小的左边距，我想在显示图像时避免这种情况。【参考方案2】：

你可以这样做：

<style type="text/css">
  .leftfloat:left;
</style>

<img class="left" src="path here" />
<img class="left" src="path here" />

【讨论】：

感谢代码，它可以工作并解决图像不能并排显示的问题。【参考方案3】：

使用float:left;你说你找到了一点左边距，所以你可以试试这个

.left
    float:left;
    margin:0;
    padding:0;

这可能是边距或填充的原因。或者你应该使用像

这样的body标签 
bodymargin:0;
padding:0;

那你就不用写margin:0; padding:0;了。

【讨论】：

【参考方案4】：

一般来说，表格是唯一适用于所有情况的方法。根据这两个图像在 HTML 中的位置，可能会有更好的方法，但这取决于。是否已经存在包含这两个图像的元素？该元素的布局属性是什么。

改变表格属性的 CSS 样式表是一件坏事。只应设置一类表（使用 table.className）或特定表（使用 table#id）的属性。如果您无法更改样式表，则必须撤消它对特定表造成的损害。

为此，请找出样式表在您身上更改了哪些属性，然后通过为您的表发出 CSS 规则（带有 table.className 或 table#id 的规则将覆盖更一般的规则）将它们改回（首选）或通过使用内联样式将属性硬编码到 HTML 中（如果您只有一对这样的样式，可以快速修复）。

【讨论】：

呃，您不能为列表设置样式以进行概括，或者如果您真的只需要两件事，请使用样式 div？【参考方案5】：

您基本上所做的就是将两个图像源标签并排放置在一行代码中。像这样。

<img src="hi"><img src="hey">

【讨论】：

【参考方案6】：

您可以使用float:left。

html:

<div id="row">
    <img class="left" src="" />
    <img class="left" src="" />
</div>

css:

.left
    width: 250px;
    height: 250px;
    float: left;


//If you don't want margins
body
    margin:0;
    padding:0;

Fiddle

【讨论】：

【参考方案7】：

这样做：

<img src="path/image.ext" /><img src="path/image.ext" />

默认显示图片inline。如果没有，请添加：

<style>img display: inline;</style>

【讨论】：

以上是关于HTML中如何让两个div并排显示，举个例子的主要内容，如果未能解决你的问题，请参考以下文章

html中怎么样让div并排显示

css如何让两个容器并排显示

html怎么将两个div并排显示啊？

html现有代码如何让两个DIV并排一行？

html 中的两个div 如何并排显示

html 中的两个div 如何并排显示