如何將div標籤的寬度設置爲高度？像一個廣場

-1

我使用引導框架建設網站。我試圖搜索，但沒有成效。此外，我對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>

你能幫助我嗎？

來源

2016-08-13 Kan

你是否試圖確保引導網格列的大小調整，他們的高度調整呢？ – 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; 
}

這樣可以使寬度一樣的高度，但它會更簡單很多，只是設置寬度和高度手動。

來源

2016-08-13 12:00:15

假如你給一個類（姑且稱之爲「方」）到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是很容易。試一試！

來源

2016-08-13 11:52:31 Ahmad

如何將div標籤的寬度設置爲高度？像一個廣場

回答

相關問題