前端学习（511）：两列布局的第一种方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两列布局</title><style>.left{width: 300px;height: 300px;background-color: pink;/* 脱离文档流 */float: left;}.right{height: 300px;background-color: plum;margin-left: 300px;}</style>
</head>
<body><div class="parent"><div class="left"></div><div class="right"></div></div>
</body>
</html>

运行结果

前端学习（511）：两列布局的第一种方式相关推荐

前端学习（512）：两列布局的第一种方式的优缺点
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
两列布局（3种解决方案）
问题:左边宽度固定,右边宽度随视窗的宽度变化而变化一.float浮动解决方案代码: <!DOCTYPE html> <html> <head><title ...
CSS三列布局（五种方式）
/*前提:左右宽度为300px,高度为100px,中间宽度自适应*/* {margin: 0;padding: 0; } <!DOCTYPE html> <html lang=&qu ...
前端学习（499）：水平居中布局得第一种方式得优点和缺点
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端学习（498）：水平居中布局得第一种方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
两列布局 html5,CSS两列布局的N种实现
原理:两个元素都设置dislpay:inline-block,为了消除html空格的影响,父元素的font-size需要设置为0,右侧自适应元素的宽度使用calc函数计算.如果两个元素的高度不一样,可 ...
常用布局简介（单列布局、两列布局、三列布局、sticky footer粘连布局）
常用布局简介一.简介网页布局对于一个前端开发者而言至关重要,掌握好布局知识有助于我们更好的实现CSS界面的设计和开发.布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多 ...
CSS布局代码:两列布局实例
CSS两列布局,右侧固定,左侧自适应宽度 <div style="width:90%; margin:0 auto;"> <div style="wid ...
CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...

前端学习（511）：两列布局的第一种方式

前端学习（511）：两列布局的第一种方式相关推荐

最新文章

热门文章