3、外浮内流
网页中所有的包含元素(父元素)以浮动模型布局,而其内部含的子元素为流动模型布局。
包含元素将完全遵循浮动模型的规律自上而下、从左至右进行布局,而内部的子元素将以浮动元素为包含框进行流动,不会出现流动元素跑动到包含元素外进行流动显示的现象。
修改的CSS代码:
#con1, #con2, #con3, #con4 {
float:left; /* 定义 ID 为con1~con4的 div 区块浮动,由块级元素转变成内联元素*/
width:45%; /* 定义其宽度为 body 宽度的 45% */
}
提示:您可以先修改部分代码再运行