1⃣️左侧float:left,右侧margin-left
注意：块级元素具有流动特性，即默认会填充外部容器，所以只需要margin，不需要设置width就可以让content填满剩余的部分
2⃣️左侧float:left右侧overflow:hidden
.left{
float: left
width: 200px
height: 200px
}
.right{
overflow: hidden
height: 200px
}
.left{
width: 200px
}
.right{
position: absolute
left: 200px
right: 0
top: 0
}
4⃣️利用d性布局
左侧的宽度会随着内容的大小而缩放
1⃣️左侧float:left右侧overflow:hidden
2⃣️利用d性布局
利用flex
========这是很简单吗！<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#header{
height: 60px
width: 100%
background: green
}
#pagebody{
height: 500px
width: 100%
background: red
}
</style>
</head>
<body>
<div id="header">
顶部模块id为header
</div>
<div id="pagebody">
主模块id为pagebody
</div>
</body>
</html>
这就是你网页布局的问题了！！因为<table>元素的默认display属性是block(块级显示)所以它要独占一行的！页<img>的默认显示属性display是inline它不独占一行，及未尾不换行！！这都是CSS属性！！在默认的状态下不可能将两个表格并排放的！！
看你的意思是要做个左右两栏的网页了！就用表格布局吧：
先插入一个两列的表格，设置边框为0,做为网页的两栏布局的最外层！
然后在右边一列内放入你的右边图片，左边一列放入你的文字和表格！
这就是表格布局，很多网页就是用表格一层层嵌套来布局的！！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）