目录
回复讨论(解决方案)
首页 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脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++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

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

div盒模型是一种用于网页布局的模型,它将网页中的元素视为一个个矩形的盒子,这个模型包含了四个部分:内容区域、内边距、边框和外边距。div盒模型的好处是可以方便地控制网页布局和元素之间的间距,通过调整内容区域、内边距、边框和外边距的大小,可以实现各种不同的布局效果,盒模型也提供了一些属性和方法,可以通过CSS和JavaScript来动态地改变盒子的样式和行为。

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

iframe和div的不同是iframe主要用于引入外部内容,可以加载其他网站的内容或将一个网页分割成多个区域,每个区域有自己的独立的浏览上下文,而div主要用于分割和组织内容的区块,用于布局和样式控制。

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