如何在包裝div中顯示彼此相鄰的div？

Question

我有一個包裝一切的頁面包裝div。此頁面div不是整頁，而是95％的寬度和高度以及邊框。

在這個我想有三個彼此相鄰，如三個傀儡，然後一個在他們之下。

我該如何做到這一點與CSS？

Answer 1

這方面，我一直使用的網站佈局，包括響應式佈局。

CSS：

.wraper{ 
    width: 95%; 
    border: 1px solid red; 
} 
.one, .two, .three{ 
    display:block; 
    width:33%; 
    border: 1px solid green; 
    box-sizing: border-box; 
} 
.one{ 
    float:left; 
} 
.two{ 
    margin:0 auto; 
} 
.three{ 
    float:right; 
} 
.four{ 
    clear:both; 
    display:block; 
    width:100%; 
    border:1px solid red; 
    box-sizing: border-box; 
} 

HTML：

<div class="wraper"> 
    <div class="one">1</div> 
    <div class="three">3</div> 
    <div class="two">2</div> 
    <div class="four">4</div> 
</div> 

DEMO

Answer 2

本質上要顯示你在一排在你的CSS display: inline希望div的，所以這是DIV 1,2和3

HTML：

<div class="wrap"> 
    <div class="one">1</div> 
    <div class="two">2</div> 
    <div class="three">3</div> 
    <div class="four">4</div> 
</div> 

CSS：

.wrap{ 
    height: 95%; 
    width: 95%; 
    border: 1px solid red; 
} 

.one, .two, .three{ 
    display: inline; 
    border: 1px solid green; 
} 

CODEPEN DEMO

Answer 3

你也可以使用float有彼此相鄰的div。

HTML：

<div class="wrapper"> 
     <div class="stack">Stack</div> 
     <div class="stack">Stack</div> 
     <div class="stack">Stack</div> 
     <div class="full">Full</div> 
</div> 

CSS：

.wrapper { 
    height: 95%; 
    width: 95%; 
} 

.stack { 
    display: block; 
    width: 33%; 
    height: 100px; 
    float: left; 
    border: 1px solid red; 
} 

.full { 
    clear: both; 
    width: 100%; 
    height: 100px; 
    border: 1px solid red; 
} 

您將需要清楚地顯示全尺寸之一。