html 设定div的宽度百分比

2024-09-02

HTML学习之给div高度设置百分比不生效的问题

这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: <body> <div id="header"> 11111111 </div> <div id="content"> 2222222222 </div> <div id="footer"&g

遇到一个题目:一个div宽度是固定百分比的情况下,如何设置高度是宽度的80% 看到题目的第一反应是用js控制,获取到div的宽度之后再用宽度的80%来设置div的高度,但是如何在不用js的情况下,只用CSS来实现呢下面是示例代码: HTML代码: <div class="outer"></div> CSS代码: .outer{ width: 30%; background: #eee; } .outer:after{ content: ''; display:

关于Div的宽度与高度的100%设定

http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承的?今天我们的话题就是有关div高度100%的问题! 其实,要弄懂div宽度|width100%.div高度|height100%到底是怎么实现

Div的宽度与高度的100%设定

div的100%是从其上一级div的宽高继承来的,所以必须设置其上一级div的宽度或高度,否则无效. 举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的宽高都为100%的话,那cc的确切大小就是父div的大小(宽300高200),在尝试中你会发现,div显示会受自身和其上一级div的padding和margin影响,而其实际宽高不受影响.值得玩味噢! 浏览器一般默认解释为内容的高度,而不是100%.但是只要为html和body设置高度为100%就可

如何设置div的宽度为100%-xx px？

如何设置div的宽度为100%-xx px? 参见如下帖子:http://stackoverflow.com/questions/15183069/div-width-100-10px-relative-to-parent width: calc(100% - 13px);如下设置样式即可

CSS如何让DIV的宽度随内容的变化

[css]CSS如何让DIV的宽度随内容的变化让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inline; }

div 内容宽度自适应、超出后换行

div 内容宽度自适应,超出后换行 { max-width:100%;width: fit-content;width: -webkit-fit-content;width: -moz-fit-content;word-wrap: break-word; }

div 自适应宽度

div 自适应宽度 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; c

div自适应宽度

对于div自适应宽度,网上的说法基本上都是将要自适应宽度的div放在其它固定宽度的最后,不指定其float属性或将float属性指定为none,比如三栏布局居中的一栏为自适应宽度,就可以这样来定义三栏div: <div id="left" style="float:left;width:100px;">这是左栏</div> <div id="right" style="float:right;width:1

关于ie6中绝对定位或浮动的div中既有向左float也有向右float时候如何让外层div自适应宽度的解决方案--

一个详细的说明请见: http://www.cnblogs.com/yiyang/p/3265006.html 我的问题大约为,如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or

CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉,又不撑破DIV布局. 特别是在IE6,如果内容超出对象高度和宽度承载,将会被撑破增高,这个时候我们可以利用以下解决方法. 总之要想让内容不超出对象设置宽度高度限定,那就使用overflow:hidden隐藏超出多余部分即可一. 我们可以使用CSS over

JS---案例：设置div的宽度

案例:设置div的宽度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 150px; background-color: pink; b

CCS进阶——div的宽度和高度是由什么决定的？

核心知识文档流/普通流(Normal Flow) 内联元素的宽高(高度是由行高决定的,宽度=内容+border+marging+padding) 块级元素的宽高(高度是内部文档流元素的高度总和,宽度默认适应父元素的宽度) 水平居中垂直居中文字溢出省略盒模型一比一的div(<div style="padding-top=100%;border: 1px solid red;"></div>) outline border调试大法 div的宽度我们先来看

div元素宽度不定的情况下如何居中显示

最近由于工作的原因碰到一个问题,就是在一个弹窗宽度不定的情况下还能是该弹窗居中显示,思考许久未找到合适办法,于是在网上找到一些办法在此总结记录下来方便以后的学习. 方法一:兼容IE67 <div class="father"> <div class="child">这个是需要剧中的元素,宽度不确定</div> </div> .father { display: inlien-block; //使.father得宽度适应

DIV+CSS兼容解决DIV最大宽度和最小宽度问题

在制作网页中,我们经常会碰到min/max-width,min/max-height在IE6底下是无效的,这也是web设计师最头疼的问题之一,以下的方法可以解决这些难题,并且比较简约.当然,如果你还有更好的方法,希望能在主页留言给我:<div style="max-width:250px;">这段文字内容,ax /min 在ie7 + 和firfox,safari,opera浏览器下均支持,最宽值为250px</div>不过IE6无法认读这个属性,还好IE它支持

text-overflow使用文字超多div的宽度或超过在table中<td>

关键字:text-overflow:ellipsis 语法:text-overflow:clip | ellipsis 取值 clip:默认值.不显示省略标记(...),而是简单的裁切. ellipsis: 当对象内文本溢出时显示省略标记(...). 可惜text-overflow 还只是ie的私有属性而已,也没被收录到w3c标准里. 如果想让某个容器(div或者li或者...块级元素)显示一行文字,当文字内容过多时,不换行,而是出现... 这样写:例如 <!DOCTYPE html PUBLI

img和div的宽度不一样问题和li之间空隙问题的解决方案

img和div宽度不一致问题今天写代码,遇到一个小问题,我把一张图片放进一个div里,然后没有设置任何的padding和margin,但是发现图片和div的高度不一样,在img的下方出现了3px的空隙. //html代码 <div><img src="img/test.jpg"></div> //css代码 div{ display: inline-block; background-color: red; } img{ width: 400px;

vue 拖动调整左右两侧div的宽度

原文链接:https://www.cnblogs.com/layaling/p/11009570.html 原文是左中右三种情况的拖动.由于项目需要,我删除掉了右边的,直接左右区域拖动调整div宽度 1.拖动,调整左右两侧宽度 <template> <div class="wid100 hig100"> <ul class="box" ref="box"> <li class="left&quo

解决css布局时两个div一个宽度固定另一个占满剩余宽度的问题

/*左侧div*/ .left-div{width: 220px;height: 100%;position: fixed;background: #FFFFFF;} /*右侧div*/ .right-div{top: 0px; bottom:0px;left:220px;right:0px;position: fixed;background: #000000;} 解决思路就是将左侧的div的高度和宽度设置好,然后右侧div只需要设置top,bottom,left,right这四个属性就可以解

html内容超出了div的宽度如何换行让内容自动换行

在显示评论列表的时候因为有固定宽,但是显示的内容超出的了div的宽,在这种情况下我们需要将其换行,实现的css代码如下在工作中评论内容测试遇到评论着的评论内容为:"dddddddddddddddddddddddddddddddddddddddddddddddddd",错误的评论,在显示评论列表的时候因为有固定宽,但是显示的内容超出的了div的宽,在这种情况下我们需要添加css为: 代码如下: word-wrap:break-word; word-break:break-all