2016-08-18 57 views
0

我可以使用列稍微接近它,但行不對齊,並且它們以對角方式摺疊。所以我想我只是重新開始,並要求提供任何幫助來製作這個響應版本。當屏幕縮小時,每個單元應該堆疊在一起。使用引導程序創建此佈局

這裏就是我試圖創建:

mockup

這是我的起點。

HTML:

<div class="unit"> 
    <div id="blue" class="square"></div> 
    <div class="text">Blue text Lorem Ipsum Blue text Lorem Ipsum Blue text  Lorem Ipsum Blue text Lorem Ipsum Blue text Lorem Ipsum Blue text Lorem Ipsum 
    </div> 
</div> 

<div class="unit"> 
    <div id="red" class="square"></div> 
    <div class="text"> 
    Red Text Lorem Ipsum Red Text Lorem Ipsum Red Text Lorem Ipsum Red Text  Lorem Ipsum Red Text Lorem Ipsum Red Text Lorem Ipsum 
    </div> 
</div> 

<div class="unit"> 
    <div id="yellow" class="square"></div> 
    <div class="text"> 
Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum  Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum </div> 
</div> 

<div class="unit"> 
    <div id="green" class="square"></div> 
    <div class="text">Green Text Lorem Ipsum Green Text Lorem Ipsum Green Text  Lorem Ipsum Green Text Lorem Ipsum Green Text Lorem Ipsum Green Text Lorem Ipsum  Green Text Lorem Ipsum</div> 
</div> 

CSS(沒有佈局)

.square{ 
    height: 50px; 
    width: 50px; 
} 

#blue{ 
    background-color: blue; 
} 

#red{ 
    background-color: red; 
} 

#yellow{ 
    background-color: yellow; 
} 

#green{ 
    background-color: green; 
} 
+0

它是沒關係的HTML做到這一點在表中。這是獲得你想要實現的一個好方法。 –

+0

用於佈局的HTML表格不是一個好主意。它在90年代被嘗試過 - 儘可能避免這樣做,因爲現在有很多(更好)的方法來實現這一點。 – ochi

回答

0

用bootstrap gridsystem

<div class="container"> 
<div class="row"> 
    <div class="unit col-md-6"> 
     <div id="blue" class="square col-md-6"></div> 
     <div class="text col-md-6">Blue text Lorem Ipsum Blue text Lorem Ipsum Blue text  Lorem Ipsum Blue text Lorem Ipsum Blue text Lorem Ipsum Blue text Lorem Ipsum 
     </div> 
    </div> 

    <div class="unit col-md-6"> 
     <div id="red" class="square col-md-6"></div> 
     <div class="text col-md-6"> 
     Red Text Lorem Ipsum Red Text Lorem Ipsum Red Text Lorem Ipsum Red Text  Lorem Ipsum Red Text Lorem Ipsum Red Text Lorem Ipsum 
     </div> 
    </div> 
</div> 
</div> 

,並重復該行的其他行 ..... 。

1

藉助Bootstrap,您將依賴Grid系統。在下面的示例中,我使用.container-fluid.col-xs-6來創建一個兩列格式的網格,而不考慮屏幕大小。

.unit { 
 
    text-transform: uppercase; 
 
} 
 

 
.square { 
 
    float: left; 
 
    width: 150px; 
 
    height: 150px; 
 
    background: #ccc; 
 
    margin: 0 15px 5px 0; 
 
} 
 

 
.red { 
 
    background: #ff0000; 
 
} 
 

 
.yellow { 
 
    background: #ffff00; 
 
} 
 

 
.green { 
 
    background: #00ff00; 
 
} 
 

 
.blue { 
 
    background: #0000ff; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
\t <div class="row"> 
 
\t 
 
\t \t <div class="col-xs-6"> 
 
\t \t \t <div class="unit"> 
 
\t \t \t \t <div class="square blue"></div> 
 
\t \t \t \t <div class="text"> 
 
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="col-xs-6"> 
 
\t \t \t <div class="unit"> 
 
\t \t \t \t <div class="square red"></div> 
 
\t \t \t \t <div class="text"> 
 
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="col-xs-6"> 
 
\t \t \t <div class="unit"> 
 
\t \t \t \t <div class="square yellow"></div> 
 
\t \t \t \t <div class="text"> 
 
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="col-xs-6"> 
 
\t \t \t <div class="unit"> 
 
\t \t \t \t <div class="square green"></div> 
 
\t \t \t \t <div class="text"> 
 
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> \t \t \t \t 
 
\t \t 
 
\t </div> 
 
</div>

+0

但是這裏的單位不會轉換爲4個垂直單位,這是不是很容易在自舉中完成?此外,文本正在包裝(在它不包裝的圖像中)和文本溢出:隱藏不工作? – bin1six