我正在尝试制作块的布局,如下所示: Pattern design
但我明白了:Pattern made with HTML and css
有人知道出了什么问题吗?你真的会帮助我!
加上其他街区的所有边框和颜色
下面的片段
#blocks {
font-size: 0; /* To prevent white-space from taking space */
}
.horBlock, .verBlock {
display: inline-block;
box-sizing: border-box;
}
.horBlock {
width: 50%;
padding-top: 25%;
vertical-align: top;
}
.verBlock {
width: 25%;
padding-top: 50%;
vertical-align: top;
}
#javaBlock {
border: 10px solid red;
}
#phpBlock {
border: 10px solid green;
}
#objective-CBlock {
border: 10px solid yellow;
}
#CBlock {
border: 10px solid purple;
}
#pythonBlock {
border: 10px solid blue;
}
#jsBlock {
border: 10px solid #FF7F00;
}
<div id="blocks">
<div class="horBlock" id="javaBlock" onclick="launchInfo(); java();">
<img src="javaLogo.svg">
</div>
<div class="verBlock" id="phpBlock" onclick="launchInfo(); php();">
<img src="phpLogo.svg">
</div>
<div class="verBlock" id="objective-CBlock" onclick="launchInfo(); objectiveC();">
<img src="objective-CLogo.svg">
</div>
<div class="verBlock" id="CBlock" onclick="launchInfo(); C();">
<img src="CLogo.svg">
</div>
<div class="verBlock" id="pythonBlock" onclick="launchInfo(); python();">
<img src="pythonLogo.svg">
</div>
<div class="horBlock" id="jsBlock" onclick="launchInfo(); js();">
<img src="jsLogo.svg">
</div>
</div>
在这种情况下,您确实希望在特定元素上使用float
属性。
创建自己的实用程序类,并根据需要将它们分配给元素;比如使用一个特定的类来向float
左边或右边的元素使用相应的类.alignLeft
和.alignRight
,例如:
<div class="horBlock alignLeft nestedBlock" id="javaBlock" onclick="launchInfo(); java();">
<img src="https://placehold.it/200x200">
</div>
<div class="verBlock alignRight nestedBlock" id="phpBlock" onclick="launchInfo(); php();">
<img src="https://placehold.it/200x200">
</div>
代码片段演示:
* {
box-sizing: border-box;
}
#blocks {
font-size: 0;
/* To prevent white-space from taking space */
}
.horBlock,
.verBlock {
display: inline-block;
box-sizing: border-box;
}
.horBlock {
width: 50%;
padding-top: 25%;
vertical-align: top;
}
.verBlock {
width: 25%;
padding-top: 50%;
vertical-align: top;
}
#javaBlock {
border: 10px solid red;
}
#phpBlock {
border: 10px solid green;
}
#objective-CBlock {
border: 10px solid yellow;
}
#CBlock {
border: 10px solid purple;
}
#pythonBlock {
border: 10px solid blue;
}
#jsBlock {
border: 10px solid #FF7F00;
}
/* Start Additional */
.alignLeft {
float: left;
}
.alignRight {
float: right;
}
.nestedBlock {
position: relative; /* required to vertically and horizontally align nested img element */
}
.nestedBlock img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
/* End Additional */
<div id="blocks">
<div class="horBlock alignLeft nestedBlock" id="javaBlock" onclick="launchInfo(); java();">
<img src="https://placehold.it/200x200">
</div>
<div class="verBlock alignRight nestedBlock" id="phpBlock" onclick="launchInfo(); php();">
<img src="https://placehold.it/200x200">
</div>
<div class="verBlock alignRight nestedBlock" id="objective-CBlock" onclick="launchInfo(); objectiveC();">
<img src="https://placehold.it/200x200">
</div>
<div class="verBlock alignLeft nestedBlock" id="CBlock" onclick="launchInfo(); C();">
<img src="https://placehold.it/200x200">
</div>
<div class="verBlock alignLeft nestedBlock" id="pythonBlock" onclick="launchInfo(); python();">
<img src="https://placehold.it/200x200">
</div>
<div class="horBlock alignLeft nestedBlock" id="jsBlock" onclick="launchInfo(); js();">
<img src="https://placehold.it/200x200">
</div>
</div>