关于个div css布局,如图怎么写??

发布网友发布时间：2022-05-05 00:59

共2个回答

热心网友时间：2022-06-28 01:00

可以用个大的div设置个宽度用作整个容器：
<div
style="width:xxxpx;text-align:center"
id="container"></div>
里面嵌套两个div（左一个右一个)：
<div
style="width:xxxpx;text-align:center"
id="container">

<div
style=“width:xxxpx;
float：left
"
id="left"
>
左边<
/div>

<div
style="width:xxxpx;"
id="right">
右边
</div>
</div>
再分左边的可以分4个div，右边2个
<div
style="width:xxxpx;text-align:center"
id="container">

<div
style=“width:xxxpx;
float：left
"
id="left"
>


<div
id="leftrow1"></div>

<div
id="leftrow2"></div>

<div
id="leftrow3"></div>

<div
id="leftrow4"></div>

<
/div>

<div
style="width:xxxpx;"
id="right">


<div
id="rightrow1"></div>

<div
id="rightrow2"></div>

</div>
</div>
再在右边的div中添加sapn
<div
style="width:xxxpx;text-align:center"
id="container">

<div
style=“width:xxxpx;
float：left
"
id="left"
>


<div
id="leftrow1"><
span
style="width:xxxpx;height:xxxpx">1</span>
省略2个span<
div>

<div
id="leftrow2"><
span
style="width:xxxpx;height:xxxpx">4</span>
省略2个span
</div>

<div
id="leftrow3"><
span
style="width:xxxpx;height:xxxpx">7</span>
省略1个span
</div>

<div
id="leftrow4"><
span
style="width:xxxpx;height:xxxpx">9</span>
省略1个span
</div>

<
/div>

<div
style="width:xxxpx;"
id="right">


<div
id="rightrow1">11</div>

<div
id="rightrow2">12</div>

</div>
</div>

热心网友时间：2022-06-28 01:01

如果只是单纯的实现这样的效果的话
你在每个方框加个<div>并设置个id
例如<div
id="01"></div>
<div
id="02"></div><div
id="03"></div><div
id="04"></div><div
id="05"></div>
再在CSS里
#01{
}
#02{
}
#03{
}
#04{
}在每个CSS里设置各自的位置和属性。就可以了。