导航:首页 > 万维百科 > 网页设计两个图并列

网页设计两个图并列

 发布时间：2020-10-12 17:26:33

1、html怎么插入两个并排的图片？

<div style=" width:100px">
<div style=" float:left; width:50px;"><img src="" width=50px height=50px/></div>
<div style=" float:left; width:50px;"><img src="" width=50px height=50px/></div>
</div>

2、HTML中怎么让两张带有超链接的图片并列显示在一行?

style="float:left"

3、这个网页里 DIV控制的两个图片怎么并排 居中

<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>SLOER's Real Life</TITLE>
<style type="text/css">
<!--
body {
background-color: #93D6FE;
}
#plane1,#plane2{width:50%;text-align:center;float:left;}
-->
</style></HEAD>
<BODY onLoad="init()">
<DIV ID=plane1><img name="planePic1" src="deimages/1.gif" border=0></DIV>
<DIV ID=plane2><img name="planePic1" src="deimages/2.gif" border=0></DIV>

</BODY></HTML>

不知道 你说的是不是这种效果。。给你弄了两种。。。

<!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>SLOER's Real Life</TITLE>
<style type="text/css">
<!--
body {
background-color: #93D6FE;
}
.page{padding-left:50%;margin:0 auto}
#plane1,#plane2{text-align:center;float:left;display:block;}
-->
</style></HEAD>
<BODY onLoad="init()">

<div class="page">

<DIV ID=plane1><img name="planePic1" src="deimages/1.gif" border=0></DIV>
<DIV ID=plane2><img name="planePic1" src="deimages/2.gif" border=0></DIV>

</div>

</BODY></HTML>

4、网页设计图片多个图片横排的的问题!!!

<!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">
<!--
.aa img {
height: 150px;
width: 115px;
}
.aa li {
float: left;
margin-right: 10px;
list-style-type: none;
}
.aa {
width: 1200px;
height: 200px;
margin-right: auto;
margin-left: auto;
}
-->
</style>
</head>

<body>
<div class="aa">
<ul>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
</ul>
</div>
<div class="aa">
<ul>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
</ul>
</div>
<div class="aa">
<ul>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
<li><img src="可爱/1.jpg" /></li>
</ul>
</div>
</body>
</html>

这段代码里面的图片路径改一下，是这种效果吗？希望也可以帮助到你

5、网页设计怎么把两张图片放平对齐

可用DIV做
你的意思是在两张图片中间放表格吗？如果是的话那就可以这样：
<style>
#vv{ float:left;}
</style>
<div id="vv"><img src=....../></div>----图片一
<table 设置宽度高度 float=left;>
<tr>
<td></td>
<td></td>
</tr>
</table>
<div><img src=....../></div>----图片二

这样做就是把第一个DIV和中间表格的float都设置成left，这样第二张图片就自动跑上去了

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

(6)网页设计两个图并列扩展资料：

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; 

}

7、网页中如何让三个DIV同时并列

1、新建一个html页面，用于实现多个div显示在同一行上。

2、在html代码页面上写两个div标签，并分别给这个两个div标签添加class类，类名分别为：one，two。如下图所示：

3、创建div标签后开始设置两个div的样式，把样式写在style标签里面。css样式代码如下图所示：

4、设置好class类属性后，保存html代码，在浏览器打开html页面，会看到多个div同时并列显示了。

当然，针对div的并列显示方法有多种，这里提供的是一种普通的方法。

8、win7画图怎么插入图片，或者是把两个图片并列在一起成一个图片

1、首先在画图软件打开一张图片，横向拼接，使用鼠标左键，点住右边中间的小白点，往外拉。

2、点击粘贴，粘贴来源，打开另一幅图片，点击鼠标左键点住此图片，同时往右拖拽，直到位置合适再松手即可。

3、点击工具栏的选择，拉框选中需要的部位外延，点击裁剪。

4、纵向拼图，打开首图后，在画面的底线（中部）的白点，往下拽即可拉长画布。

5、九宫格的图片制作原理也是一样，用复制（Ctrl+C）、粘贴（Ctrl+V）快捷键。当粘贴来源之后及时拖拽、调整图片位置（默认总在左上角）即可。

6、调整好置之后，点击裁剪，win7画图插入图片，即可把图片并列成一个图片。

9、请问怎么让两张图片并排显示呢？html代码和css

右侧图片距离左侧图片100px的代码，如果你的100px指的是图片本身高宽相差100，那就直接改img里的高宽即可，src中为图片对应的路径和图片名称：

<table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top"><img src="images/a.jpg" width="80" height="200" /></td>
    <td valign="top"><div style="margin-left:100px;"><img src="images/b.jpg" width="80" height="100" /></div></td>
  </tr>
</table>

与网页设计两个图并列相关的知识