查看“模板:栏目块”的源代码

{{#CSS:
/* 复制于https://otomad.wiki/Template:%E5%AD%90%E6%A0%8F%E7%9B%AE.css */
.childbox-image-more::before {
	content: "";
	opacity: 0;
	transition:opacity 0.2s;
}

.childbox-image-more:hover::before {
    content: "了解更多";
    font-weight: bold;
    position: absolute;
    display: flex;
    font-size: 20px;
    color: black;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 200;
    opacity: 1;
    background-color: rgba(255,255,255,0.7);
}

.childbox-image-more {
	transform: scale(1);
	transition:all 0.2s;
}

.childbox-image-more:hover {
	transform: scale(1.01);
}

.childbox-image-more-child img {
	width: 100%;
	height: auto;
}

@media (min-width: 850px) {
	.childbox-box {
		margin:10px;
		display:flex;
		font-size: 0;
	}
	.childbox-image {
		width:30%;
		border-radius:6px;
		overflow:hidden;
		/*box-shadow: 0 3px 6px rgb(0 0 0 / 20%)*/;
		cursor: default;
		align-items: center;
		margin:auto;
	}
	.childbox-text {
		width:65%;
		margin-left:20px;
	}
	.childbox-title {
		flex:1;
		font-weight:700;
		font-size:20px;
		margin-top:5px;
	}
}
@media (max-width: 850px) {
	.childbox-box {
		margin:10px;
		display:flex;
		flex-direction: column;
		font-size: 0;
	}
	.childbox-image {
		width:100%;
		border-radius:6px;
		overflow:hidden;
		/*box-shadow: 0 3px 6px rgb(0 0 0 / 20%)*/;
		cursor: default;
		align-items: center;
		margin:auto;
	}
	.childbox-text {
		width:100%;
	}
	.childbox-title {
		text-align:center;
		flex:1;
		font-weight:700;
		font-size:20px;
		margin-top:5px;
	}
}
}}
<div class="childbox-box">
<div class="childbox-image {{#if:{{{详情|}}}|childbox-image-more" data-more="{{{详情}}}"|"}}><div {{#if:{{{详情|}}}|class="childbox-image-more-child"}} style="pointer-events: none;">{{{图片|[[File:Soka Cafe.png|300px]]}}}</div></div>
<div class="childbox-text">
<div class="childbox-title">{{{标题|标题}}}</div>
{{#if:{{{内容|}}}|<div style="flex:1;font-size:14px;margin-top:10px">{{{内容|内容}}}</div>}}
</div>
</div>{{#if:{{{详情|}}}|{{#Widget:Childbox-more}}}}
<noinclude>
本Template复制于https://otomad.wiki/Template:%E5%AD%90%E6%A0%8F%E7%9B%AE
==示例==
{{栏目块
|图片=[[File:编辑部.png]]
|标题=Editorial Department
|内容=Editorial Department是HUIJIA FUN的建立均运营团体。
|详情=https://huijia.fun
}}
</noinclude>