CSS佈局 - 三列，含兩個箱

我目前的佈局看起來像這樣中間列：https://gyazo.com/5ed712dcea7d207b511220e3c73185da CSS佈局 - 三列，含兩個箱

我把A，B和C在同一div，並給他們相同的類名，然後做與此.css文件：

.classname{ 
    display: inline-block; 
    width: 32%; 
    vertical-align: top; 
}

但我想補充d到B的底部，這樣的佈局是這樣的： https://gyazo.com/4e8cb4cfd3f4011d359bc1e25b717ff1

有沒有辦法做到這一點？

謝謝！

來源

2016-07-14 Jamie_Q

你使用任何CSS框架e.g引導？ – trungk18

不，這是一個類，我從頭開始寫代碼。 –

@Vishal Panara的答案僅適用於Boostrap。你可以在這裏上傳你的所有源代碼嗎？ – trungk18

我只是用另一個div來包裝div B和div D，以使它保持在一起。這正是我告訴你如何處理這種佈局的方式。但更好的方法是使用css的flex屬性。其他誰知道彎曲很好可以幫助使用flex。

* { 
 
\t box-sizing: border-box; 
 
} 
 
.classname { 
 
\t display: inline-block; \t 
 
\t vertical-align: top; 
 
\t border: 1px solid red; 
 
} 
 
.layout { 
 
\t height: 100px; 
 
\t float: left;width: 31%; 
 
\t margin: 5px; 
 
}

<div class="classname layout">a</div> 
 
<div class="layout"> 
 
\t <div class="classname" style="width: 100%;height: 70px;">b</div> 
 
\t <div class="classname" style="width: 100%;height: 20px;margin-top: 10px;">d</div> 
 
</div> 
 
<div class="classname layout">c</div>

來源

2016-07-14 06:05:32

是的，最好的方法是使用flex。我已經使用flex發佈了答案:) –

Flexbox，就可以解決這個問題。你可以做的一個方法就是這樣做，看看下面的代碼。但如果你不想這樣，那麼你可能希望看看砌體佈局。

.container { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 
.elem-left, .elem-right { 
 
    width: 200px; 
 
    border: 1px solid #000; 
 
} 
 
.elem-left{ 
 
    border-right: 0; 
 
} 
 
.elem-right{ 
 
    border-left: 0; 
 
} 
 
.elem { 
 
    border: 1px solid #000; 
 
    position: relative; 
 
} 
 
.flex-column { 
 
    -webkit-box-flex: 1; 
 
     -ms-flex: 1; 
 
      flex: 1; 
 
} 
 
.flex-column>.elem:first-of-type{ 
 
    border-bottom: 0; 
 
} 
 
.elem p { 
 
    margin: 0; 
 
    padding: 1em; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <div class="elem-left"></div> 
 
    <div class="flex-column"> 
 
    <section class="elem"> 
 
     <p> 
 
     Flexbox is so easy! 
 
     </p> 
 
    </section> 
 
    <section class="elem"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget. 
 
     </p> 
 
    </section> 
 
    </div> 
 
    <div class="elem-right"></div> 
 
</div>

來源

2016-07-14 06:05:45

非常感謝！ –

CSS佈局 - 三列，含兩個箱

回答

相關問題