Inhaltsverzeichnis
回复讨论(解决方案)
Heim Web-Frontend HTML-Tutorial 【】一个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;}
Nach dem Login kopieren

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列的表格

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So erhöhen Sie die Festplattengröße in VirtualBox [Anleitung] So erhöhen Sie die Festplattengröße in VirtualBox [Anleitung] Mar 17, 2024 am 10:10 AM

So erhöhen Sie die Festplattengröße in VirtualBox [Anleitung]

Was soll ich tun, wenn die Win7-Taskleiste im rechten Fenster des Desktops angezeigt wird? Was soll ich tun, wenn die Win7-Taskleiste im rechten Fenster des Desktops angezeigt wird? Jun 29, 2023 pm 07:41 PM

Was soll ich tun, wenn die Win7-Taskleiste im rechten Fenster des Desktops angezeigt wird?

Wie man mit CSS erkennt, dass einem Div eine Ecke fehlt Wie man mit CSS erkennt, dass einem Div eine Ecke fehlt Jan 30, 2023 am 09:23 AM

Wie man mit CSS erkennt, dass einem Div eine Ecke fehlt

Implementierung eines Browserskripts zur Wortmarkierungsübersetzung basierend auf der ChatGPT-API Implementierung eines Browserskripts zur Wortmarkierungsübersetzung basierend auf der ChatGPT-API May 01, 2023 pm 03:28 PM

Implementierung eines Browserskripts zur Wortmarkierungsübersetzung basierend auf der ChatGPT-API

Was sind die Unterschiede zwischen div und span? Was sind die Unterschiede zwischen div und span? Nov 02, 2023 pm 02:29 PM

Was sind die Unterschiede zwischen div und span?

Was ist das Div-Box-Modell? Was ist das Div-Box-Modell? Oct 09, 2023 pm 05:15 PM

Was ist das Div-Box-Modell?

Was ist der Unterschied zwischen iframe und div? Was ist der Unterschied zwischen iframe und div? Aug 28, 2023 am 11:46 AM

Was ist der Unterschied zwischen iframe und div?

So legen Sie die Größe des Apple 15-Symbols fest So legen Sie die Größe des Apple 15-Symbols fest Mar 08, 2024 pm 05:22 PM

So legen Sie die Größe des Apple 15-Symbols fest

See all articles