[英]How to create 3 column layout using css without using grid(For ie 10 compatibility)
如何轉換以下 HTML,類似於圖像? 不要將元素包裝在另一個 div 中。 我的目的是僅使用 css 將每個元素的位置更改為左側、右側或頂部。 是否可以?
<div class="container">
<div class="left">1</div>
<div class="left">2</div>
<div class="left">3</div>
<div class="left">4</div>
<div class="right">5</div>
<div class="center">6</div>
<main class="main-content"></main>
</div>
div.container { width:100%; position:relative; height:100% } .col { min-heght:20px; float: left; } .col-inner { padding: 10px; background: gray; } .col-60 .col-inner { padding: 10px; background: blue; } .col-20{ width:20%; position:relative; line-height: 60px; } .col-60{ width:60%; position:relative; line-height: 60px; } .item { border: 1px solid; margin: 2px; text-align: center; min-height: 60px; border-radius: 5px; vertical-align:middle; background: #ddd; } .main-contain{ min-height: 200px; line-height: 2000px; }
<div class="container"> <div class="col col-20"> <div class="item">1</div> <div class="item">2</div> <div class="item">4</div> </div> <div class="col col-60"> <div class="item">6</div> <div class="item main-contain">main</div> </div> <div class="col col-20"> <div class="item">3</div> <div class="item">5</div> </div> </div>
**編輯 2 :僅使用 HTML 和 CSS 移動排列元素幾乎是不可能的。 可能有一個解決方案,但最有效的方法是使用 jQuery appendTo() 函數。
這篇文章可能對你很有用: 如何將一個元素移動到另一個元素中?
**編輯:我最近知道你在找什么。 我會盡快為您的問題找到答案。
根據您的示例,您可以通過創建 3 列(在我的代碼中我使用帶有“列”類的 div)並應用display: inline-block;來實現這一點。 對他們來說,確保列的總和不會高於 99%。
display: inline-block將嘗試使用父容器的整個寬度,而沒有內容溢出它。 當寬度大於 99% 時,將最后一列發送到下一行。
HTML
<div class="column one-fourth">
<div><p>1.1</p></div>
<div><p>1.2</p></div>
<div><p>1.3</p></div>
</div>
<div class="column two-fourth">
<div><p>2.1</p></div>
<div><p>2.2</p></div>
</div>
<div class="column one-fourth">
<div><p>3.1</p></div>
<div><p>3.2</p></div>
<div><p>3.3</p></div>
<div><p>3.4</p></div>
</div>
CSS
.column {
text-align: center;
vertical-align: top;
padding: 10px 0px;
display: inline-block;
width: 100%;
}
@media only screen and (min-width: 900px) {
.column.one-fourth { width: 24.75%; }
.column.two-fourth { width: 49.5%; }
}
.column div {
background: red;
margin: 10px;
}
.column p {
color: white;
font-weight: bold;
font-size: 50px;
margin: 0px;
}
這是一個 codePen 來看看它是如何工作的: https ://codepen.io/ialexandru/pen/NWPzRZj
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.