使用引导程序创建此布局

我可以使用列稍微接近它，但行不对齐，并且它们以对角方式折叠。所以我想我只是重新开始，并要求提供任何帮助来制作这个响应版本。当屏幕缩小时，每个单元应该堆叠在一起。使用引导程序创建此布局

这里就是我试图创建：

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; 
}

来源

2016-08-18 bin1six

它是没关系的HTML做到这一点在表中。这是获得你想要实现的一个好方法。 –

用于布局的HTML表格不是一个好主意。它在90年代被尝试过 - 尽可能避免这样做，因为现在有很多（更好）的方法来实现这一点。 – ochi

用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>

，并重复该行的其他行 ..... 。

来源

2016-08-18 20:51:25 scaisEdge

借助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>

来源

2016-08-18 20:52:07

但是这里的单位不会转换为4个垂直单位，这是不是很容易在自举中完成？此外，文本正在包装（在它不包装的图像中）和文本溢出：隐藏不工作？ – bin1six

使用引导程序创建此布局

回答

相关问题