用绝对定位实现两列布局，绝对定位的块宽度超出父框。
如图所示。
一个是老师做的，一个是我做的，在老师做的里面，内容到了父框的边框是会自动换行的年，但是为什么我自己做的内容多了不会自动换行，而是会超出父框边界呢？求解答！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>横向二列布局</title>
<style type="text/css">
*{margin:0;padding:0}
.wrap{width:1080px; margin:0 auto;border:2px solid #C4C4C4; position:relative;}
.header{height:200px;background:#EC3210; position:relative;}
.body1{height:800px; width:200px; background:#1591D5;}
.body2{background:#F9F824; position:absolute; margin-left:220px; top:200px;}
</style>
</head>
<body>
<div class="wrap">
<div class="header">header</div>
<div class="body1">body1</div>
<div class="body2"><p>body2body2body2bodybody2body2body2bodybody2body2body2bodybody2body2body2bodyy2body2body2bodybody2body2body2bodyy2body2body2bodybody2body2body2bodyy2body2body2bodybody2body2body2body</p></div>
</div>
</body>
</html>
这是我的代码。
高山彝人4回答
-
慕郎_莲华
css 属性： word-break 和 word-wrap 可以帮助你word-break: break-all; word-wrap: break-word; -
野猫1
使用题主的代码，在浏览器上实现的界面是没有问题的，建议题主不要只是在DW上查看，试试看直接在浏览器中查看代码效果。 -
hengyiyuan
你的问题是你输入的内容如果过长，不会自动换行，直接在div外面显示了。这里面的问题是position:absolute;定位就脱离了文档流，你的内容和这个定位就没有在同一个文档流里面。所以就不受这个定位的影响了。据我所知，如果要左边宽度固定，右边自适应。左边给了宽度后用margin-left给一个和宽度一样的负值。大概事例如下。<div id="container"><div id="left" class="aside">Left Sidebar</div><div id="content" class="section">Main Content</div></div><style type="text/css">*{margin: 0;padding: 0;}#container {overflow: hidden;} #left {background: #ccc;float: left;width: 200px;margin-bottom: -99999px;padding-bottom: 99999px; } #content {background: #eee;margin-left: 200px;/*==此值等于左边栏的宽度值==*/margin-bottom: -99999px;padding-bottom: 99999px;}#left,#content {min-height: 200px;height: auto !important;height: 200px;}</style>
随时随地看视频慕课网APP
Html/CSS
前端工具