DW2017圖片文字怎么并排排列? HTML圖片/文字并排排列代碼寫法
我要評(píng)論在做頁(yè)面的時(shí)候，有很多的排版方式，如果用代碼將其一一實(shí)現(xiàn)，那就需要點(diǎn)耐心了，今天我們使用代碼來做個(gè)圖文排版的頁(yè)面，左側(cè)是圖片區(qū)，右側(cè)是文字解釋區(qū)。
Adobe Dreamweaver CC 2017 v17.0 中文版(附安裝教程) 32位
- 類型：網(wǎng)頁(yè)設(shè)計(jì)
- 大?。?/span>734MB
- 語(yǔ)言：簡(jiǎn)體中文
- 時(shí)間：2016-11-05
首先先準(zhǔn)備圖片素材和文字語(yǔ)言，如圖；在body中的建設(shè)就這
添加CSS樣式修飾，最外面的大框添加寬度居中；下面的圖片和文字設(shè)置
現(xiàn)在的圖文是這樣排版，如圖
想要將圖文左右排版，無非是定位或者浮動(dòng)，對(duì)圖片塊和文字塊都添加了浮動(dòng)效果后，
如圖，添加浮動(dòng)后，文字部分因?yàn)槲淖痔L(zhǎng)超出了他所用那的范圍，所以被擠到到了下行的右側(cè)，如圖
這時(shí)候，將文字區(qū)域設(shè)置下寬度，不讓他超過最大范圍就行了，如圖；設(shè)置寬度為450px
然后再預(yù)覽效果圖，就完美解決了。
以上就是HTML圖片/文字并排排列代碼寫法，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
dw有序列表ol怎么用? HTML頁(yè)面添加有序列表ol的教程
dw中水平線的顏色怎么改? Dreamweaver水平線修改顏色的兩種方法
Dw怎么撤銷組合鍵? Dw關(guān)閉按control組合鍵顯示新建文檔對(duì)話框的技巧
相關(guān)文章
Dreamweaver2018怎么開啟臨時(shí)文件預(yù)覽?
Dreamweaver2018怎么開啟臨時(shí)文件預(yù)覽? Dw2018中制作的網(wǎng)頁(yè)想要進(jìn)行預(yù)覽，該怎么使用臨時(shí)文件預(yù)覽呢？下面我們就來看看詳細(xì)的設(shè)置方法2021-08-10
DwCC2018雙字節(jié)內(nèi)聯(lián)輸入怎么實(shí)現(xiàn)?
DwCC2018雙字節(jié)內(nèi)聯(lián)輸入怎么實(shí)現(xiàn)？Dreamweaver2018中可以設(shè)置上允許雙字節(jié)內(nèi)聯(lián)輸入，但是很多朋友找不到在哪里設(shè)置，詳細(xì)請(qǐng)看下文介紹2021-05-14
Dw CC 2018速記css樣式怎么關(guān)閉列表樣式?
Dw CC 2018速記css樣式總怎么關(guān)閉列表樣式？Dw CC 2018中設(shè)置css樣式的時(shí)候，想要設(shè)置速記關(guān)閉列表模式，該怎么操作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2021-05-01
DW2018移動(dòng)文件時(shí)怎么設(shè)置從不更新鏈接?
DW2018移動(dòng)文件時(shí)怎么設(shè)置從不更新鏈接？DW2018文件經(jīng)常會(huì)移動(dòng)位置，這時(shí)候鏈接也會(huì)自動(dòng)更新，不想要更新鏈接，該怎么操作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以2021-05-01
Dreamweaver怎么輸入項(xiàng)目符號(hào)? dw項(xiàng)目符號(hào)的添加方法
Dreamweaver怎么輸入項(xiàng)目符號(hào)？Dreamweaver中想要插入項(xiàng)目符號(hào)，該怎么插入呢？下面我們就來看看dw項(xiàng)目符號(hào)的添加方法，需要的朋友可以參考下2021-03-15
Dreamweaver窗口大小在哪里設(shè)置? dw設(shè)置窗口大小的技巧
Dreamweaver窗口大小在哪里設(shè)置？Dreamweaver軟件想要設(shè)置窗口大小，該怎么設(shè)置呢？下面我們就來看看dw設(shè)置窗口大小的技巧，需要的朋友可以參考下2021-03-05
Dreamweaver復(fù)制粘貼怎么去除格式? DW設(shè)置只復(fù)制文本的技巧
Dreamweaver復(fù)制粘貼怎么去除格式？Dreamweaver從其他程序復(fù)制過來的文字有很多格式，想要去除格式，只復(fù)制文本，該怎么操作呢？下面我們就來看看DW設(shè)置只復(fù)制文本的技巧，2021-03-05
Dreamweaver怎么替換文字? DW批量替換文字的技巧
Dreamweaver怎么替換文字？dw制作網(wǎng)站網(wǎng)頁(yè)的時(shí)候，內(nèi)容需要進(jìn)行批量替換，該怎么替換文字呢？下面我們就來看看DW批量替換文字的技巧，需要的朋友可以參考下2021-03-05
DW2021怎么下載? Dreamweaver2021破解安裝圖文教程
DW2021怎么下載？DW2021版本想要下載安裝，該怎么下載呢？下面我們就來看看Dreamweaver2021破解安裝圖文教程，需要的朋友可以參考下2020-11-19
Dreamweaver代碼怎么自動(dòng)排版? dw代碼格式化的技巧
Dreamweaver代碼怎么自動(dòng)排？Dreamweaver中的代碼看上去很亂，不好找，想要將代碼格式化了，看上去更有條理性，該怎么操作呢？下面我們就來看看dw代碼格式化的技巧，需要的2020-07-22
