CSS如何写一个宽度为屏幕50%的正方形DIV
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS如何写一个宽度为屏幕50%的正方形DIV相关的知识，希望对你有一定的参考价值。
如题
有好几种办法，这里说两种，存CSS
第一种
<div style="width:50%;padding-bottom:50%;height:0px;background:#ccc;"></div>
第二种
<div style="width: 50vw; height: 50vw; background:green;"></div> 参考技术A .panel display:block; background:#000; width:50%;var panelWidth = $(".panel").width();
$(".panel").height(panelWidth);<div class="panel"></div>
希望能帮到您，谢谢！
这是jquery在onload的时候，给height赋值为div的width
<html>
<head>
<style type="text/css">
#fang
width: 50%;
background-color: #333;
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function gaodu()
$("#fang").css("height",$("#fang").css("width"));
</script>
</head>
<body onload="gaodu()">
<div id="fang"></div>
</body>
</html> 参考技术C DIV的宽度就设置为50%，然后JS获取DIV的宽度附给高度就行了，
document.getElementById("test").style.height=document.getElementById("test").offsetWidth;
<div id="test" style="width:50%"></div> 参考技术D 配合JS应该可以实现，JS取得屏宽screen.width就可以了
CSS宽度以％为单位，高度以px为单位，长度相同[重复]
【中文标题】CSS宽度以％为单位，高度以px为单位，长度相同[重复]【英文标题】：CSS width in % and height in px and both same length [duplicate] 【发布时间】：2014-04-25 18:41:26 【问题描述】：我尝试制作的是随着屏幕大小改变大小的正方形。
所以我将宽度设置为 25%。 如何确保高度与宽度保持相同的像素长度？
提前致谢。
【问题讨论】：
重复了这么多问题，下次努力搜索。 【参考方案1】：您可以使用 top/bottom padding 百分比属性来获得结果。
Example Here.
.box
width: 25%;
padding-bottom: 25%;
顶部/底部 padding 或 margins 上的 percentage value 是相对于框的包含块的宽度。
8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'
<percentage>百分比是相对于宽度计算的 生成的盒子的包含块，即使是'padding-top'和 '填充底部'。
添加内容
由于盒子的高度是通过添加内容来增加的，我们可以用一个元素 .wrapper 包裹内容并相对于盒子绝对定位，然后使用 top、right、left 和bottom 属性填满整个盒子空间。
Example Here
<div class="box">
<div class="wrapper">
<!-- content goes here... -->
</div>
</div>
.box
width: 25%;
position: relative;
.box:after
content: "";
display: block;
padding-top: 100%; /* 1:1 square */
.box > .wrapper
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
有关更多信息，您可以参考my answer here（响应式容器部分）。
【讨论】：
在这里工作jsfiddle.net/u2Qbk 不知道为什么这被否决了，这就是我要使用的解决方案，并且正方形的大小调整得很好。 在添加内容之前一直有效..jsfiddle.net/Paulie_D/u2Qbk/1 @Paulie_D 我已经解释了如何在发布的链接中添加内容。 @Paulie_D 你是对的，这是一个更新的代码示例，用于修复内容问题jsfiddle.net/trzFs【参考方案2】：您可以将宽度值设置为百分比，然后用 jquery 抓取它，然后让它成为高度值。看到这个
var box = $(".box");
var width = box.css("width");
box.css("height", width);
http://jsfiddle.net/DPYcg/1/
【讨论】：
【参考方案3】：为了能够添加内容，您可以使用伪元素和浮动行为：http://codepen.io/anon/pen/fklAr/
div
width:25%;
background:red;
margin:auto;
div:before, div:after
content:'';
div:before
float:left;
padding-top:100%;
div:after
display:block;
clear:both;
如果您想将内容居中，可能会重复：Center content in the middle of div container
【讨论】：
以上是关于CSS如何写一个宽度为屏幕50%的正方形DIV的主要内容，如果未能解决你的问题，请参考以下文章