设置div的宽度为父元素的百分比,高度为宽度的百分比

        body {
            margin: 0 auto;
            width: 100%;
            /*清除display:inline-block元素换行符间隙*/
            font-size: 0;
            text-align: center;
        }
        div {
            display: inline-block;
            width: 20%;
            background: green;
            font-size: 12px;
            position: relative;
            vertical-align: middle;
        }
        div:before {
            content:"";
            display: inline-block;
            /*设置div的高度*/
            padding-bottom: 100%;
            width: .1px;
            vertical-align: middle;
        }
        div:nth-child(2n){
             background: orange;
         }
        div:nth-child(3n){
            margin-right: 0;
        }
        span {
            display: inline-block;
            vertical-align: middle;
            font-size: 4em;
            color: #fff;
        }
时间: 2024-11-07 01:33:14

设置div的宽度为父元素的百分比,高度为宽度的百分比的相关文章

CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8&q

图片宽度溢出父元素,居中

图片宽度不固定  居中   (超出父元素宽度) 父元素  taxe-align:center: .img{ margin:0 -100%; } 原文地址:https://www.cnblogs.com/zzzzzwt/p/8119368.html

为什么子元素设置margin-top会作用在父元素上?

原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> html * { margin:0; padding: 0; } </style> <body> <

图片宽度大于父元素宽度时如何水平居中

1. 定位流:对图片进行定位 .img{ position:absolute; left:50%; margin-left:-20px;/*值为图片宽度的一半*/ } 这种方法不多说...但是这种方法有个弊端:就是必须知道图片的宽度; 2.重点来咯****奇淫技巧**** .img{ margin:0 -100%; } 注:此方法必须 父元素必须设置 text-align:center;

设置div 居中 和得到dom元素高度

javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollH

子元素浮动 父元素不能自动调节高度的问题

我们知道,子元素浮动或者相对定位,元素都会脱离文档流.而父元素如果没有设置固定高度,在计算高度时,就不会计算浮动子元素所占的高度.但是,有时候我们需要父元素计算其所有子元素的的高度(包括浮动元素)来调整自己的宽高,以便调节自身的背景 border等,此时,只需要给父元素添加css属性: overflow:auto; zoom : 1; 父元素就会自动计算包括浮动子元素内所有子元素的高度来调整自己的高度.

Windows Phone 8.1中元素适应屏幕宽度或子元素继承父元素宽度的解决方案

在Windows Phone开发过程中,对不同尺寸手机屏幕的适应是对编程的一大要求和挑战,当然这就像做网站要适应各 种各样的电脑屏幕的大小一样. 当然在WP开发这一点上,微软给了我们很多中已经封装好布局的模板和控件,归根结底,还是那几个布局控件: Grid,StackPanel,Canvas,Pivot..... 所以,分歧就来了,对于追求视觉上冲击和美观的程序员来说,虽说要秉承微软的大块布局,内容为先的策略,但是 依旧不喜欢微软的那些既定的模板,所以解决方案就有两个. 一:创建项目时依旧用那些

父元素如何围住浮动子元素

当元素使用float属性,将脱离文档流,因此父元素便不会包围它. <section> <div class="左栏"> 我是左栏 我是左栏 我是左栏 我是左栏 </div> <div class="右栏"> 我是右栏 </div> </section> <footer>我是页脚</footer> CSS样式如下: section{ border: 1px solid #3

子元素浮动后、父元素的高度自适应

一.普通情况下,即没有任何浮动样式等的情况下 设置父元素的高度为aotu 或100% 或者不设置,那么父元素会根据子元素的高度而自动调整自身高度. 栗子 <!--html代码--> <div id="wrap"> <img src="./1.png" alt="logo"/> <div id="content"></div> </div> CSS样式 #w