web如何制作并列的盒子

html-css012

web如何制作并列的盒子,第1张

1、首先打开web使用cssfloat。我们对div设置一个float浮动属性即可解决不并列显示,只要你的并列盒子总宽度小于或等于最外层盒子宽度即可实现多个盒子并列显示。

2、其次注意设置float属性以及并列总宽度小于外层宽度。

3、最后使用cssdisplay同列显示。我们加入display:inline即可解决实现并列显示div盒子。

<div class="box">

<div>

<div>

<div class="contont">内容</div>

</div>

</div>

</div>

一般情况下是会设置一个类名来进行设置样式的,

像这样可以通过子代选择器来设置,例如:

.box>div>div>div{color:#f00} 但是假如最里层有多个div那也会被设置当前样式,所以这样虽然可以设置到,但是不合理。

通过后代选择器来设置: .box .contont{ color:#f00} 这样就是设置自代类名为 .contont的盒子了。

很多种方式,主要有定位和浮动两种。

基础的就用浮动,就是加个样式float:left

另外就是定位了,定位有很多种,绝对定位、相对定位、固定定位这些,都可以实现。

具体实现的效果还是要根据你自己的需求来。