如何将div标签的宽度设置为高度？像一个广场

问题描述：

我使用引导框架建设网站。我试图搜索，但没有成效。此外，我对Javascript和CSS没有太多了解。如何将div标签的宽度设置为高度？像一个广场

一个例子代码：

<div class="row"> 
<!-- Squares inline-block--> 
<div class="col-md-2"> 
</div> 
<div class="col-md-2"> 
</div> 
<div class="col-md-2"> 
</div> 
<div class="col-md-2"> 
</div> 
<div class="col-md-2"> 
</div> 
<div class="col-md-2"> 
</div> 
<!-- Squares inline-block--> 
</div>

你能帮助我吗？

你是否试图确保引导网格列的大小调整，他们的高度调整呢？ – mcgraphix

是的。纵横比为1：1。 – Kan

答

有一个非常简单的方法来创建一个从纯CSS中纵横比为1：1的div。

HTML：

<div class="width ratio"> 
    <div class="content">Aspect ratio 1:1</div> 
</div>

CSS：

.width { 
width: 45%; /* Desired width size */ 
background: #000; 
position: relative; 
display: inline-block; 
margin: 1%; 
vertical-align: top; 
} 
.width:before { 
    content: ''; 
    display: block; 
} 
.ratio:before {padding-top: 100%;} /* keeps ratio at 1:1 */ 
.content {  
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
    font-size: 1.5rem; 
    color: #fff; 
}

这样可以使宽度一样的高度，但它会更简单很多，只是设置宽度和高度手动。

答

假如你给一个类（姑且称之为“方”）到div你想成为方：

<div class="row square">

使用CSS，你可以设置它的高度和宽度：

/*filename.css*/ 
.square{ 
    height:200px; 
    width:200px; 
    background-color:green; /*to make it visible*/ 
}

要链接的css文件，把下面的HTML文件的顶部：

<head> 
    <link rel="stylesheet" href="bootstrap.css"> <!--I'm sure you've done this step :)--> 
    <link rel="stylesheet" href="filename.css"> 
</head>

学习CSS是很容易。试一试！

如何将div标签的宽度设置为高度？像一个广场

相关推荐