1. 首頁
  2. 問答
  3. 創建並排div而不會影響對方主div內

創建並排div而不會影響對方主div內

2016-12-29 70 views
1

我想要這樣的div，但在一個div中像A和D一樣在一個div中，B和E在一個div中，而在其他div中保留在html中。創建並排div而不會影響對方主div內

我也可以選擇使用bootstrap和jquery。

enter image description here

代碼演示：

<div class="main"> 
    <div class="row"> 
    <div class="col"> 
     <table>A</table> 
    </div> 
    <div class="col"> 
     <table>D</table> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col"> 
     <table>B</table> 
    </div> 
    <div class="col"> 
     <table>E</table> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col"> 
     <table>C</table> 
    </div> 
    </div> 
</div>

我用ANKIT的解決方案，但DIV相互混合。

enter image description here

給分鐘後，高度進展順利：

enter image description here

我不想給最小高度。

來源

2016-12-29 3 rules

+0

顯示你的代碼，你試過至今。 – aavrug

+0

使用css列。 – connexo

+0

此外，如果您告訴我們您是否打算使用引導程序，或者您想從頭開始，那麼這將非常棒。謝謝！ – avilac

回答

1

試試這個： 

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
.div{ 
 
    width: 90%; 
 
    border: 2px solid; 
 
    height: 50px; 
 
    margin: 5px;} 
 
</style> 
 
</head> 
 
<body style="font:15px Verdana;"> 
 
<div style="width:10%;display: -webkit-box;"> 
 
\t <div style="width:50%;margin-right: 5px;"><div class="div">a</div> 
 
    <div class="div">b</div> 
 
    <div class="div">c</div></div> 
 
<div style="width:50%;"> 
 
    <div class="div" style="height: 75px;">d</div> 
 
    <div class="div" style="height: 75px;">e</div></div> 
 
</div> 
 
</body> 
 
</html>

來源

2016-12-29 11:38:55 Ankit

+0

感謝您的答案，但在這裏您已經固定了高度，我不想修復高度，因爲數據來了它應該自動填充。 –

+0

這個結構沒有問題，這裏高度並不重要，因爲首先他已經劃分爲div，如果你增加或減少高度沒有問題 –

+0

@Ankit我已經使用了這個解決方案並且更新了我的問題請看我現在應該做什麼？ –

1

你正在嘗試做的事情叫做砌體佈局。 它基本可以如下得到：

HTML：

<div class="masonry"> 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
    <div class="item">...</div> 
    ... 
    ... 
    <div class="item">...</div> 
</div>

CSS：

.masonry { /* Masonry container */ 
    column-count: 4; 
    column-gap: 1em; 
} 

.item { /* Masonry bricks or child elements */ 
    background-color: #eee; 
    display: inline-block; 
    margin: 0 0 1em; 
    width: 100%; 
}

來源：http://w3bits.com/css-masonry/

來源

2016-12-29 11:21:39 Jay

+0

你可以請再次參考我的問題我已經添加了一些代碼演示是否有可能與該代碼！ –

1

試試這個，希望這會有所幫助。

.main { 
 
    display: inline-block; 
 
    height: 150px; 
 
} 
 

 
.row { 
 
    float: left; 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 

 
.col { 
 
    width: 20px; 
 
    border: 1px solid #000; 
 
    flex: 1 auto; 
 
    margin: 1px; 
 
}
<div class="main"> 
 
    <div class="row"> 
 
    <div class="col"> 
 
    <span>A</span> 
 
    </div> 
 
    <div class="col"> 
 
    <span>D</span> 
 
    </div> 
 
    <div class="col"> 
 
    <span>B</span> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col"> 
 
    <span>E</span> 
 
    </div> 
 
    <div class="col"> 
 
    <span>C</span> 
 
    </div> 
 
</div>

來源

2016-12-30 03:51:05 aavrug

+0

我使用Ankit的答案得到了解決方案，但仍然感謝您的答案。 –

+0

很高興聽到你有一個解決方案。我剛剛給出了這個解決方案，因爲上面那個是固定的高度。 – aavrug

相關問題

 相關問題