兩列頁面

Question

爲一個圖片往往比語言更好，在這裏不同的高度（事先不知道）的顯示HTML塊是一個模式我想達到的目標：

所以，我試圖做的是在頁面的右半部分或左半部分放置一些文本塊。但是，我不知道每個塊的高度;我所知道的僅僅是它們的寬度（大約是整個屏幕寬度的45％）

第一個元素必須位於頁面的右半邊，因爲靜態元素已經在左半邊。但是，根據1號區塊的高度，如果有剩餘空間，則第二個區塊必須位於左側，否則位於右側。
每一個塊的局部視圖（我使用ASP.NET MVC）

我絕對不知道如何實現這一點裝，但是，這是我的嘗試：

<div style="width:45%; display: inline-block"> 
    // My static element hard-coded 
</div> 

<div style="width:45%; display: inline-block"> 
    // My blocks 
</div> 

但是我懷疑這個HTML結構是否好，因爲元素只會在45％的權利上加載。

的信息，中間分隔的樣式喜歡這樣：

.middle-separator { 
    width: 1px; 
    background: #aaa; 
    position: absolute; 
    top: 30px; 
    left: 50%; 
    bottom: 0; 

我也試圖與引導和col-sm-4我玩積木，但它不工作和元素3，對於爲例，不會就在元素1之後，但要低得多。
另外，我寧願避免<table>，只用CSS來實現這一點。這是一個個人項目，我想正確地做。

Answer 1

一些CSS

.card-columns { 
    /*Set the column-count to how many columns you want 
    *Set the column-gap to ajust the space between the cards 
    */ 
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2; 
    -webkit-column-gap: 1.25rem; 
    -moz-column-gap: 1.25rem; 
    column-gap: 1.25rem 
} 
.card-columns .card { 
    display: inline-block; 
    width: 100 % 
} 

一些HTML

<div class="card-columns"> 
    <div class="card"></div><!--duplicate this div and add the content for that card to it--> 
</div> 

禮貌：引導CSS

Answer 2

檢查了這一點。硬編碼。我使用padding作爲動態元素和div的固定高度，名稱爲static，並將每個div與您提供的圖像完全一致。只是評論，如果我弄錯了。

body { 
 
    margin: 0; 
 
} 
 

 
.column1, .column2 { 
 
    width: 45%; 
 
} 
 
.column1 > div, .column2 > div{ 
 
    border: 2px solid black; 
 
    display: block; 
 
    margin-bottom: 15px; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.column2{ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
} 
 
.static { 
 
    height: 100px; 
 
} 
 

 
.element1 { 
 
    padding: 100px 0 100px 0; 
 

 
} 
 

 
.element2 { 
 
    padding: 150px 0 150px 0; 
 
} 
 

 
.element3 { 
 
    padding: 35px 0 35px 0; 
 
    
 
} 
 

 
.element4 { 
 
    padding: 25px 0 25px 0; 
 

 
} 
 

 
.element5 { 
 
    padding: 45px 0 35px 0; 
 
} 
 

 
.element6 { 
 
    padding: 40px 0 40px 0; 
 
} 
 

 
.divider { 
 
    position: absolute; 
 
    height: 95%; 
 
    width: 3px; 
 
    background: black; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
}

<div class="column1"> 
 
    <div class="static"> 
 
    static 
 
    </div> 
 

 
    <div class="element2"> 
 
    element2 
 
    </div> 
 

 
    <div class="element6"> 
 
    element6 
 
    </div> 
 
</div> 
 
<div class="column2"> 
 
    <div class="element1"> 
 
    element1 
 
    </div> 
 
    <div class="element3"> 
 
    element3 
 
    </div> 
 
    <div class="element4"> 
 
    element4 
 
    </div> 
 
    <div class="element5"> 
 
    element5 
 
    </div> 
 
</div> 
 
<div class="divider"> 
 

 

 
</div>

Answer 3

https://jsfiddle.net/amoolya93/ne9sm2kc/

<div class= 'parent'> 
<div class="blah"> 
// My static element hard-coded 
</div> 

<div class="blah2 el1"> 
    // Element 1 
</div> 

<div class="blah2 el2"> 
    // Element 2 
</div> 

<div class="blah2 el3"> 
    // Element 3 
</div> 

<div class="blah2 el4"> 
    // Element 4 
</div> 
</div> 


.parent{ 
    display: flex, 
    flex-wrap: wrap 
} 

.blah{ 
    width: 250px; 
    background-color: red; 
    color: blue; 
    margin-bottom: 2px; 
    display: inline-flex; 
} 

.blah2{ 
    width: 250px; 
    background-color: blue; 
    color: yellow; 
    margin-bottom: 2px; 
    display: inline-flex 
    } 

.el1{ 
    height: 20px; 
} 

.el2{ 
    height: 40px; 
} 

.el3{ 
    height: 50px; 
} 

.el4{ 
    height: 20px; 
} 

看看這個小提琴，我已經使用了Flex和柔性包裝。這可能是你需要的。

Answer 4

使用<div>

我會劃分權利和屏幕的左半部分爲獨立的區域，那麼你可以在左側<div>

這裏是頂部插槽您的靜態元素工作示例

body { 
 
    max-width: 95%; 
 
    background: #111; 
 
} 
 
.columnleft { 
 
    float: left; 
 
    max-width: 50%; 
 
} 
 
.columnright { 
 
    float: right; 
 
    max-width: 50%; 
 
} 
 
.article { 
 
    border: 1px solid #999; 
 
    display: inline-block; 
 
    margin: 4%; 
 
} 
 
.title { 
 
    color: #aff; 
 
    font-size: 22px; 
 
    text-align: center; 
 
    margin: 20px 0 5px 0; 
 
} 
 
.content { 
 
    color: #888; 
 
    font-size: 18px; 
 
    text-align: justify; 
 
    padding: 20px; 
 
    margin: 15px 15px 30px 15px 
 
}

<body> 
 
    <div class="columnleft"> 
 
    <div id="article1" class="article"> 
 
     <div class="title">Headline 1</div> 
 
     <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere 
 
     menandri mei te, praesent democritum no pro. Aliquid tractatos in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. 
 
     </div> 
 
    </div> 
 
    <div id="article2" class="article"> 
 
     <div class="title">Headline 2</div> 
 
     <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere 
 
     menandri mei te, praesent <br>democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum 
 

 
     </div> 
 
    </div> 
 
    <div id="article3" class="article"> 
 
     <div class="title">Headline 3</div> 
 
     <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro.Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="columnright"> 
 
    <div id="article4" class="article"> 
 
     <div class="title">Headline 4</div> 
 
     <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. 
 
     </div> 
 
    </div> 
 
    <div id="article5" class="article"> 
 
     <div class="title">Headline 5</div> 
 
     <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere 
 
     menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum 
 

 
     </div> 
 
    </div> 
 
    <div id="article6" class="article"> 
 
     <div class="title">Headline 6</div> 
 
     <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere 
 
     menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum 
 
     no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

Answer 5

http://codepen.io/dominicgan/pen/dOJQPY/

CSS

.elem { 
    background: #eee; 
    border: solid 1px #ccc; 
    margin: 10px; 
    padding: 10px; 
    width: calc(45% - 20px); 
} 

JS

var elem = document.querySelector('.elem__wrapper'); 

var msnry = new Masonry(elem, { 
    // options 
    itemSelector: '.elem' 
}); 

的masonry庫處理這種相當好如果你不介意一些js。否則，css列就像@Luuk寫的那樣很好用。