外观
Skip to content
负margin值
让标题出现在内容区的边框上
代码如下：
.yakima_h5 {line-height: 32px; padding: 0; margin-left: 4em; display: inline; background-color: white;}
.yakima_ul {padding-top: 15px; border: 1px solid red; margin: -16px 2em 0;}
.yakima_ul li {line-height: 2; list-style-type: square;}
示例标题
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。效果如下：
.yakima_h5 {line-height: 32px; padding: 0; margin-left: 4em; display: inline; background-color: white;} .yakima_ul {padding-top: 15px; border: 1px solid red; margin: -16px 2em 0;} .yakima_ul li
示例标题
- 床前明月光，
- 疑是地上霜。
- 举头望明月，
- 低头思故乡。
将有宽度的元素在其容器中水平居中（元素若有高度，可同时垂直居中）
直接来竖直水平同时居中的代码：
.yakima_outerDiv {
position: relative;
width: 98%; height: 200px;
border: 1px solid red;
}
.yakima_innerDiv {
position: absolute; left: 49%; top: 100px;
width: 40px; height: 60px;
margin-left: -20px; margin-top: -30px;
background-color: skyblue;
}
out
in效果：
.yakima_outerDiv { position: relative; width: 98%; height: 200px; border: 1px solid red; } .yakima_innerDiv
out
in
可实现三栏中栏流动布局
所谓“三栏中栏流动布局”，就是说三栏里左栏和右栏的宽度都是固定的，中栏的宽度自动撑开。代码如下：
.yakima_threeColumns {width: 100%; float: left; background-color: yellow;} /*添加浮动是为了强制让容器包围其内部浮动的子栏，也可以用overflow: hidden;*/
.yakima_twoColumns {width: 100%; margin-right: -50px; float: left; background-color: gray;} /*添加浮动是为了强制让容器包围其内部浮动的子栏*/
.yakima_columnAlpha {width: 30px; background-color: rgba(100, 0, 0, .2); float: left;}
.yakima_columnBeta {margin-left: 30px; margin-right: 50px; background-color: rgba(0, 100, 0, .2);}
.yakima_columnGama {width: 50px; background-color: rgba(0, 0, 100, .2); float: left;}
A
B
C 效果如下： .yakima_threeColumns {width: 100%; float: left; background-color: yellow;} /*添加浮动是为了强制让容器包围其内部浮动的子栏，也可以用overflow: hidden;*/ .yakima_twoColumns {width: 100%; margin-right: -50px; float: left; background-color: gray;} /*添加浮动是为了强制让容器包围其内部浮动的子栏*/ .yakima_columnAlpha {width: 30px; background-color: rgba(100, 0, 0, .2); float: left;} .yakima_columnBeta {margin-left: 30px; margin-right: 50px; background-color: rgba(0, 100, 0, .2);} .yakima_columnGama {width: 50px; background-color: rgba(0, 0, 100, .2); float: left;} A B C