如图所示。一个是老师做的，一个是我做的，在老师做的里面，内容到了父框的边框是会自动换行的年，但是为什么我自己做的内容多了不会自动换行，而是会超出父框边界呢？求解答！<!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 回答
已采纳
慕郎_莲华
TA贡献83条经验 获得超16个赞
css 属性： word-break 和 word-wrap 可以帮助你
word-break: break-all; word-wrap: break-word;
使用题主的代码，在浏览器上实现的界面是没有问题的，建议题主不要只是在DW上查看，试试看直接在浏览器中查看代码效果。
hengyiyuan
TA贡献1条经验 获得超0个赞
你的问题是你输入的内容如果过长，不会自动换行，直接在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>
添加回答
举报
0/150
提交
取消