css 田字布局，子元素之间，子元素和父元素之间间距10，自适应

html-css016

css 田字布局，子元素之间，子元素和父元素之间间距10，自适应,第1张

前几天去猿辅导面试的css面试题，当时太紧张了，就想着怎么按百分比或者是位移搞，但是冷静下来，css复杂的定位就给元素包爸爸，几乎能解决一大票问题。

细致的描述问题：

一个父元素里面有四个子元素，按田字排列，子元素之间间距10px,和父元素之间的间距也是10px，父元素缩放时子元素要自适应。

解决思路就是父元素里面再包一层，来解决父元素和子元素间距10 的问题。

四个子元素分别再包一层b,b就负责宽高占父元素的50%，里面的b-inner，负责子元素之间的间距。用position absolute相对b进行定位，搞出间距，注意平分公共间距一个子元素应该位移的是5px。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

.divL{

float: leftbackground-color: yellowwidth: 120pxheight: 120px

}

.divLT{

margin: 50px

}

.divLB{

margin: 0px 50px 50px

}

.divR{

float: rightbackground-color: yellowwidth: 120pxheight: 120px

}

.divRT{

margin: 50px 50px 50px 0px

}

.divRB{

margin: 0px 50px 50px 0px

}

.divTB{

background-color: #005580border-color: #000000width: 550pxheight: 50px

}

.divLR{

width: 80pxheight: 390pxbackground-color: #008000display: table-cell

}

</style>

</head>

<body>

<div class="divTB"></div>

<div style="display: tablewidth: 550px">

<div class="divLR"></div>

<div class="divL divLT"></div>

<div class="divR divRT"></div>

<div class="divL divLB"></div>

<div class="divR divRB"></div>

<div class="divLR"></div>

</div>

<div class="divTB"></div>

</body>

</html>

写的可能不太行，不知道满不满足你的要求

最简单的是写一个table标签：<table border="0" cellpadding="0" cellspacing="0" width="200"><tbody>

<tr>

<td>

这里拖一个gridview控件

</td>

<td>

这里拖一个gridview控件

</td>

</tr>

<tr>

<td>

这里拖一个gridview控件

</td>

<td>

这里拖一个gridview控件

</td> </tr>

</tbody>

</table>

这样就是田字型的了，表格的大小根据你的网页自己设一下。