目錄
回复讨论(解决方案)
首頁 web前端 html教學 【】一个DIV中并列放两个DIV。右侧div大小不定。_html/css_WEB-ITnose

【】一个DIV中并列放两个DIV。右侧div大小不定。_html/css_WEB-ITnose

Jun 24, 2016 pm 12:02 PM
div 右側 大小


如图所示:
想制作一个网页,其中头部是一个div,其中左边是一个图片,右侧是背景色(与图片右侧的颜色相同),根据浏览器的大小repeat-x。
下方是一个#middle的div嵌套两个叫left和right的div,其中left的width为200px;right的右边缘要与头部右边缘一致。

问题是右边right的总是比较窄,做不到根据页面大小适应啊???


回复讨论(解决方案)

在右侧div内加个div,并加上一个inner的类

div1{float:left;position:relative;margin-right:-200px;}div2{float:right;width:100%;}div2 .inner{margin-left:200px;}
登入後複製

http://jsfiddle.net/jikeytang/b75z9/2/
网速快的话,打开看看。

回2L,加上margin-right:-200px;之后左侧就消失了

"问题是右边right的总是比较窄,做不到根据页面大小适应啊???"啥意思?
左边宽度固定的话,右边应该填满共同容器的剩余宽度,根据页面宽度自适应。当页面宽度较小,右边才会很窄的吧。如果希望当页面宽度较小时,右边div不会太窄,可以给右边div定义一个min-width,或者,使用media query进行响应式布局,将右边或左边div垂直显示,不在一行。
以下是一个简单的两列布局的例子:

nbsp;html>


    
    
    Test









你看看你的width设计的大小是否左右相等 还有高度大小

你也可以用DWcs5插入一个2行2列的表格

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何在VirtualBox中增加磁碟大小[指南] 如何在VirtualBox中增加磁碟大小[指南] Mar 17, 2024 am 10:10 AM

我們經常遇到預定義磁碟大小沒有空間容納更多資料的情況?如果您在稍後階段需要更多的虛擬機器硬碟空間,則必須擴充虛擬硬碟和分割區。在這篇文章中,我們將看到如何在VirtualBox中增加磁碟大小。增加VirtualBox中的磁碟大小重要的是要注意,您可能希望在執行這些操作之前備份您的虛擬硬碟文件,因為總是有可能出錯。有備份總是一個好的做法。然而,該過程通常運作良好,請確保在繼續之前關閉您的機器。有兩種方法可以增加VirtualBox中的磁碟大小。使用圖形使用者介面擴充VirtualBox的磁碟大小使用CL

Win7工作列顯示在桌面右側視窗怎麼辦 Win7工作列顯示在桌面右側視窗怎麼辦 Jun 29, 2023 pm 07:41 PM

  Win7工作列顯示在桌面右側視窗怎麼辦?一般情況下工作列預設是在螢幕底部的,但近期有Win7用戶打開電腦發現工作列跑到螢幕的右側視窗去了,那麼有沒有什麼方法可以將其修改回來呢?很多小夥伴不知道怎麼詳細操作,小編下面整理了Win7工作列顯示在桌面右側視窗解決步驟,如果你有興趣的話,跟著小編一起往下看看吧! Win7工作列顯示在桌面右側視窗解決步驟1、首先我們右鍵點選桌面右側視窗的工作欄,選擇屬性,如下圖所示:  2、開啟的工作列和屬性視窗中,在螢幕上的工作列位置選擇底部,並勾選鎖定工作列,點

css怎麼實作div缺一個角 css怎麼實作div缺一個角 Jan 30, 2023 am 09:23 AM

css實作div缺少一個角的方法:1、建立一個HTML範例文件,並定義一個div;2、給div設定寬高背景色;3、給需要刪除一角的div增加一個偽類,將偽類設定成跟背景色一樣的顏色,然後旋轉45度,再定位到需要去除的那個角落即可。

基於 ChatGPT API 的劃詞翻譯瀏覽器腳本實現 基於 ChatGPT API 的劃詞翻譯瀏覽器腳本實現 May 01, 2023 pm 03:28 PM

前言最近GitHub上有個基於ChatGPTAPI的瀏覽器腳本,openai-translator,短時間內star衝到了12k,功能上除了支援翻譯外,還支援潤飾和總結功能,除了瀏覽器插件外,還使用了tauri打包了一個桌面客戶端,那拋開tauri是使用rust部分,那瀏覽器部分實作還是比較簡單的,今天我們就來手動實作一下。 openAI提供的介面例如我們可以複製以下程式碼,在瀏覽器控制台中發起請求,就可以完成翻譯//範例constOPENAI_API_KEY="s

iframe和div有什麼不同 iframe和div有什麼不同 Aug 28, 2023 am 11:46 AM

iframe和div的不同是iframe主要用於引入外部內容,可以載入其他網站的內容或將一個網頁分割成多個區域,每個區域有自己的獨立的瀏覽上下文,而div主要用於分割和組織內容的區塊,用於佈局和样式控制。

div盒模型是什麼 div盒模型是什麼 Oct 09, 2023 pm 05:15 PM

div盒模型是用於網頁佈局的模型,它將網頁中的元素視為一個個矩形的盒子,這個模型包含了四個部分:內容區域、內邊距、邊框和外邊距。 div盒模型的好處是可以輕鬆控制網頁佈局和元素之間的間距,透過調整內容區域、內邊距、邊框和外邊距的大小,可以實現各種不同的佈局效果,盒模型也提供了一些屬性和方法,可以透過CSS和JavaScript來動態地改變盒子的樣式和行為。

div與span的差別有哪些 div與span的差別有哪些 Nov 02, 2023 pm 02:29 PM

差異有:1、div是一個區塊級元素,span是一個行內元素;2、div會自動佔據一行,span則不會自動換行;3、div用於包裹比較大的結構和佈局,span用於包裹文字或其他行內元素;4、div可以包含其他區塊級元素和行內元素,span可以包含其他行內元素。

蘋果15圖示怎麼設定大小 蘋果15圖示怎麼設定大小 Mar 08, 2024 pm 05:22 PM

蘋果15圖示使用者想要設定大小也是非常簡單的,在手機的設定中找到顯示與亮度進行詳細設置,使用者可以靈活的自訂變更圖示的大小。蘋果15圖示怎麼設定大小答:在設定的顯示與亮度中進行詳細設定1、請先啟動您的iPhone或iPad設備,進入主畫面介面。 2、然後用戶需要選擇螢幕下方的「設定」應用程式圖標,點擊進入。 3.在「設定」選單中,選取「顯示與亮度」選項,在裡面找到「檢視」或「縮放顯示」選項。 4.使用者可以有多個選項可供選擇,例如「預設」、「中」或「較大」等等設定。 5.選好適合的圖示尺寸後,輕擊螢幕右上

See all articles