導航:首頁 > 萬維百科 > 網頁設計兩個圖並列

網頁設計兩個圖並列

 發布時間：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>

與網頁設計兩個圖並列相關的知識