div如何做到自适应......

父级div高度100%,里面有三个子div,上中下排列,三个子div高度都是自适应的,且顺序不固定,求大神指点

7个回答

你是说父级怎么自适应吗?要是父级的话添加个类father可以用添加个伪类:after
然后设置.father:after{content:''; display:block; clear:both;}

图片说明

 <div style="border: 1px solid #ccc;width:100%;float:left;height:30px;s"></div>
<div style="border: 1px solid #bbb;width:100%;float:left;height:30px;"></div>
<div style="border: 1px solid #aaa;width:100%;float:left;height:30px;"></div>

欢迎收藏素文宅博客:blog.yoodb.com

子div的样式给width:100%;height:33%;

 <div style="height:100%;">
        <div style="width:100%;height:33%;border:1px solid red;">s</div>
        <div style="width:100%;height:33%;border:1px solid red;">s</div>
        <div style="width:100%;height:33%;border:1px solid red;">s</div>


    </div>

如果子div宽度都是100%的话,父div是会被三个子div高度撑开的,如果你子div都是用的float的话,建议给父div清除浮动~

你可以看看bootstrap里面的栅格系统,方便很多

设置 三个div float:left

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
如何做到自适应
希望随着时间的增加 高度越来越小rnid为ss的元素高度设置是为100%可是 ie下还是不变化 ff下是正确的rn希望改成ie下也能变化的(PS:不能用js算高度然后给ss元素)rn[code=HTML]rnrnrn rn Dialogrn rnrnrn rn 11rn rnrn rnrn[/code]
div如何自适应宽度
[code=HTML]rn rn 固定宽度 rn 要如何让这个div的宽度自由随着main的宽度自动变化呢rnrnrn rn rn 用table就可能很方便实现rn 用div要怎么做呢rnrnrn[/code]rnrn特注: 不能用js来实现
如何做到缩放页面,div元素始终自适应浏览器窗口的高?
这样为什么不行?rn```rn var contactBd = document.getElementById('contact-bd');rn var contactBdHeight = contactBd.offsetHeight;rnrn if(contactBdHeight
vb60如何做到自适应分辨率
现在显示器的分辨率太乱了。各种大小不一,rn小分辨率下做的,大分辨率看了太小、rn大分辨率做的,小分辨率显示不完全。rn请问有没有人实现了用vb自适应分辨率。rn求教。
bootstrap图片如何做到自适应?
bootstrap响应式图片的正确的设置是在img上面加上两个类就可以了 src="..." class="img-responsive center-block" > 如果是在内容页里面的话,直接用js给每个img加上属性就可以了。   $(window).load(function(){  $(".panel-body img").addClass
div自适应
height:auto !important; height:200px; /*假定最低高度是200px*/ min-height:200px; 忘记说了一点:整个是在一个iframe里面,而这个ifrme在页面load时做了自适应处理 function iFrameHeight(frmName) { var ifm= document.getElementByI...
webview div 自适应如何解决
我用CSS rnhtml,bodyheight:100% 设置了自适应rn还有div 的style高宽都是100%,在浏览器里是正常的自适应rnrn但是在webview里body的高度就不是屏幕高度 而且很小 只有19。从而导致div也只这么高rn请问如何解决?
自适应(div自适应,和屏幕自适应高度)
1. div自适应内容: 由于div里的内容常常会发生变化,总是修改高度很麻烦,如果是动态页面则更不可能每次都改高度,所以div必须要自适应内容高度。 技巧: div去掉height,增加padding-bottom即可。 2. 屏幕自适应高度:同div自适应高度一样,有时页面的内容或多或少,甚至没有,而页面存在底部footer,如果不自适应屏幕高度,内容过少,会导致footer跑到页面...
页面没有做到自适应
发现博客网有一个bug,作为一名默默无名的前端,表示不能忍[img=https://img-bbs.csdn.net/upload/201801/02/1514874293_690642.jpg][/img]
winform 窗体设计如何做到自适应
随着屏幕分辨率的变化,按钮的大小和位置等都相应调整。如何实现,请教高手!
wpf中的GroupBox的宽度如何做到自适应。
我是美工,需要美化界面,前台我用的GroupBox包住里面要输入的信息,那些输入信息是后台生成的。为了在不同分辨率下能让GroupBox能全屏幕显示,我用了MinWidth和MinHeight,但是显示出来没起作用。哪位高手给指点一下,谢谢!
css div自适应宽度
#sidebar { /** 右侧栏 div **/     width: 300px; float: right;   }   #content {/**左侧栏,自适应宽**/     margin-left: -310px; float: left; width: 100%;   }   #contentb {/**左侧栏,自适应宽子div**/     margin-lef
div内容文字自适应
神马都不用说了  先来张图 下面是代码  .mDiv{ background-color: red; width: 100%; height: 40px; line-height: 40px; color: black; font-size: 20px; display: inli
div自适应宽度
.item_sel{     min-width: 141px;     width: auto;     _width:141px;     white-space:nowrap; }
div自适应浏览器宽高
最近学习web开发,html+jquery,一直思考和寻找div自适应浏览器宽高的解决办法,但是很失望,各个浏览器不一样,特别是这个360浏览器。 的position是relative到好办,但是要是其中有 是absolute就比较麻烦。各位有没有好的办法给指点指点。平常都是怎么布局才能使div能适应各个浏览器,当浏览器窗口放大缩小时,div也能够自适应宽高,不出现滚动条。
DIV IFRAME自适应问题
布局如下:rn[img=http://hi.csdn.net/attachment/201004/17/145847_12714771049Y1G.jpg][/img]rnrn浅蓝色部分是部分页面才有的.rn1.没有浅蓝色部分的页面:middle div的高度会随其内部的内容变化而变化,此时,需要将main、left、right的高度调整成一致且和Middlern2.有浅蓝色部分的页面:Middle中分m_left,m_right两个DIV,其中m_left中有一个iframe,在此需要实现iframe高度自适应且所有的DIV高度自动调整成一致。rnrn现在的情况:rn对于第一种情况,我用了如下JS:rn[code=JScript]rnfunction SetCwinHeight()rnrn var mainCol = window.document.getElementById('main'); rn var leftCol = window.document.getElementById('left'); rn var rightCol = window.document.getElementById('right');rn var middleCol = window.document.getElementById('middle');rnrn var theHeight = middleCol.clientHeight;rn if(theHeight >= 800)rn rn mainCol.style.height = theHeight + 'px'; rn leftCol.style.height = theHeight + 'px'; rn rightCol.style.height = theHeight + 'px';rn rn elsern rn mainCol.style.height = '800px'; rn leftCol.style.height = '800px'; rn rightCol.style.height = '800px';rn rn rnrn[/code]rn但没效果,DIV高度还是不一致rnrn对于第二种情况,当iframe的内容多的时候,我用JS实现了所有DIV高度自动增加,但当iframe高度减少时,DIV的高度却不同步减少。我的JS如下:rnrn[code=JScript]rnfunction autoHeight()rn rn var iframeid=document.getElementById("iframe"); //iframe idrn if (document.getElementById)rn rn if (iframeid && !window.opera)rn rn if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight)rn rn iframeid.height = iframeid.contentDocument.body.offsetHeight + "px";rn document.getElementById("m_left").style.height=document.getElementById("iframe").offsetHeight + "px";rn document.getElementById("main").style.height=document.getElementById("iframe").offsetHeight + "px";rn document.getElementById("m_right").style.height=document.getElementById("main").offsetHeight + "px";rn document.getElementById("left").style.height=document.getElementById("m_right").offsetHeight + "px";rn document.getElementById("right").style.height=document.getElementById("left").offsetHeight + "px";rn rn rn else if(iframeid.Document && iframeid.Document.body.scrollHeight)rn rn iframeid.height = iframeid.Document.body.scrollHeight + "px";rn document.getElementById("m_left").style.height=document.getElementById("iframe").offsetHeight + "px";rn document.getElementById("main").style.height=document.getElementById("iframe").offsetHeight + "px";rn document.getElementById("m_right").style.height=document.getElementById("main").offsetHeight + "px";rn document.getElementById("left").style.height=document.getElementById("m_right").offsetHeight + "px";rn document.getElementById("right").style.height=document.getElementById("left").offsetHeight + "px";rn rn rn rn rn[/code]
div内容自适应的问题
如何使白色区域的div( )自适应显示,也就是能根据屏幕的大小,内容的多少,自动出现滚动条rnrnrnrnrn rn 无标题文档rn rnrnrnrn rn rn 0rn 1rn 2rn 3rn 4rn 5rn 6rn 7rn 8rn 9rn 10rn 11rn 12rn 13rn 14rn 15rn 16rn 17rn 18rn 19rn 20rn 21rn 22rn 23rn 24rn 25rnrn rnrn
div背景全屏自适应
div背景全屏自适应
div自适应浏览器窗口
请教各位大侠,我有一个div1,div1里面有一个div2,div2里放一张图片,需求是这张图片能自适应浏览器窗口的大小,浏览器窗口大时,图片尺寸显示大,浏览器窗口小时,图片尺寸显示小。新手,就是调试不成功呢rn[code=css]rnbodyrn margin:0px;rn padding:0px;rn position:relative;rnrn.div1rn height:130px;rn width:100%;rn background-image:url(qtxImg/white1920.jpg);rn position:relative;rnrnrn.div2 rn width:116px;rn height:98px;rn position: absolute;rn top: 13%;rn left: 25%;rnrn[/code]rnrnrn[code=html]rnrn rn rn rn rn rnrnrnrnrnrnrnrnrnrn[/code]rn我的代码,放在div2里的logo不能随浏览器窗口的变化而缩放,我想让它随窗口变化而缩放,请假各位了。
div宽度自适应
div+css 宽度自适应,隐藏超出部分,单击显示。求思路rnrn rn rn 1....rn 2....rn 3....rn n....rnrnrnrn1. li的内容是文字链接,文字长度不定,float: left;rn2. li的个数不定;rn3. div的宽度固定,当li的总长度大于div的宽度,隐藏超出部分,并显示更多链接“>>”,单击弹出层,显示超出部分的li;rn4. 求最简单的思路,有代码更好。
DIV底部自适应
&amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&amp;gt; &amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;l
DIV 高度 自适应
NULL 博文链接:https://peacherdiy.iteye.com/blog/803569
【css+div】DIV的自适应问题
[img=http://img701.photo.wangyou.com/2009/07/22/1947688/20090722135654_0_2_s.jpg][/img]
div 大小自适应的问题
rnrnrnrn Splitterrn rn rn rnrn rn rn rn rn rn rn rn rn rnrn rn rnrnrnrnrnrn rnrn rn 临时订阅组rn rn rn rn rnrnrn rnrnrnrnrn rnrnrnrnrn 这是我写的一个测试用例 动态添加和删除 divrn但是在删除div 之后 父亲div 不能很好的自适应打大小了 不能收缩回到原来的大小了 请高人指点一下子 应该怎么设置 在线等答案了 要是不明白我说的 您可以运行一下子 就看出问题了 谢谢了 O(∩_∩)O~
div 自适应100%高度
最近要写个页面,从上到下包含两个层,上面的层高度固定,下面的层要求填满剩下的屏幕,即100%高 我们先考虑只有一个层自适应高度的情况,在HTML4.0标准中,只需要设定height=100%,就能实现一个层的自适应高度,但是到xhtml1.0之后,百分比高度则是根据外围框体的高度来决定,所以我们可以设定body的高度为100%,样式表代码如下   html,body{margin:0;...
自适应屏幕宽高的div
备忘:JS 实现方法function responsive(){ var a=document.documentElement.clientWidth; var b=document.documentElement.clientHeight; //div宽高相对于屏幕的80%; var c=a*0.8; var d=b
div自适应屏幕高度
问题描述:本地项目页面左侧菜单点击父亲节点拉伸出子节点后,演示的阴影不能覆盖所有的左侧菜单,现象如下图:此时整个演示的页面要通过滚动条才能看到整个菜单内容 整个菜单都放在div中,div的父亲节点为body,此时设置了height为100%,依然没有效果 开始考虑的解决方案是div自适应屏幕大小,尝试方案如下: 尝试方案:1.通过css样式修改,设置最小高度 _heig
div生成自适应的输入框
同样是前任的坑,好好的textarea不用干吗要div模拟html:&amp;lt;!--多行文本--&amp;gt; &amp;lt;div contenteditable=&quot;true&quot; class=&quot;multipletext&quot; placeholder=&quot;请在此填写登记内容&quot;&amp;gt;&amp;lt;/div&amp;gt;解析:带有contenteditable属性的div可作为输入框(div可以根据内容自动调整高度哦)css:.mu..
div宽度自适应的问题
问:如何令以下页面中class名称为mid的div宽度自适应rnrn[code=HTML]rnrnrnrn rn rnrnrnrn rn boxHeaher rn boxBodyrnrnrn rn boxHeaher rn boxBodyrnrnrnrn[/code]
div 宽带自适应
-
div 自适应屏幕宽度 高度?
[code=csharp] rn rn rn rn rn rn rn rn rn rn rn rn rn[/code]rnrn有个div 里面 如何让其自身根据屏幕宽度来决定显示几个gif图片rn1、屏幕大了,只能显示为一行, 撑满一行rn2、屏幕小了 ,显示 左右箭头 < > 点击 可以往左、右移动
div自适应浏览器
页面由5部分组成,运行代码后即可看清。现在用的浏览器为IE9,当改变浏览器尺寸后,div#left以及#right部分会明显被挤到屏幕右侧,我希望rn1.#left的左端可以始终和#head以及#footer左端对齐rn2.#left宽度+#right宽度正好等于#head宽度也就是#right右端正好和#head右端对齐rn3.能兼容FF浏览器。目前在FF浏览器下测试,#left和#right整个偏离预定位置。rn代码如下:rn[code=javascript]rnrn rnrnrnrn rnrn 这里是head部分rnrnrn rn rn 用户名:rn 密码:rn rn rn rnrnrn rnrn rnrnrnrnrn rnfooterrnrnrnrn[/code]rn我的CSS实在很烂,希望大家能给出解决的方法,
怎样做到隐藏DIV
我是在Frontpage上用TEXT控件加图片,使用DIV的效果,做成COMBOX的效果,rn其实我这样做的目的是想完成可输入也可选,但现在有一个问题 是:在DIV显示后,我可以点击任何地方都可以隐藏DIV,如COMBOX的效果,我使用Document Onclick事件时它连DIV中的控件也激发了,能不能做到除了这个DIV控件外其他的ONCLICK时都可以隐藏DIV。rnrn
div自适应 文字自适应 站牌设计
div中 文字动态自适应n![图片说明](https://img-ask.csdn.net/upload/201501/12/1421028448_586055.jpg)n1.绿色区域的大小是固定的n2.绿色区域中的站点数据不固定 有可能很多就会很宽。站点名称也不固定 数据就会很长。n需要实现的是:n1.站点数据要展示在绿色区域中。根据显示的数据条数和最长站点的名称来实现文字的自动适应。(填充整个绿色区域)n求大神指点思路!
svg图像如何自适应div大小
请问html页面的 div中 引入一个 svg图像 如何使这个图像能够自适应div的大小呢?
Echarts如何自适应父级div的宽高
原先的布局是左边的树形框占20%,右边的div占80%;rn收缩了左边的树形框后,右边的div变为90%;rn但是div中的Echarts却还是原先80%的样子,没有自适应;rn试了网上的方法,但是没成功,请大家帮忙看看!rn[img=https://img-bbs.csdn.net/upload/201803/27/1522116601_823748.jpg][/img]rn[img=https://img-bbs.csdn.net/upload/201803/27/1522116611_430812.jpg][/img]
3个DIV,中间的如何自适应宽度?
[code=HTML] rnrn#left width:35px; float:left; rn#center float:left; rn#right width:35px; [/code]rnrn左右两侧的div宽度为35px,中间的自适应宽度,也就是无论用户屏幕分辨率如何,左右各35px去掉以后,中间的div填充剩下的像素。rn如何写CSS呢?
如何div高度占满全屏(自适应)
概述:记录一下,别人已经写得比较好了,下次方便检索 网址:http://www.cnblogs.com/pangguoming/p/5695184.html
请教div高度如何自适应屏幕分辨率
图片总是上传不成功,简单的说就是左右两列div,请教如何让这两个div的高度自适应当前屏幕的分辨率,自动撑满屏幕?谢谢!
怎么才能做到自适应页面!
现在要求页面背景要轮播的效果,图 1920 1080的大小,要求在不同分辨率下 能保证页面自适应,求大俠帮忙!
相关热词 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法

相似问题