如圖所示。一個是老師做的，一個是我做的，在老師做的里面，內容到了父框的邊框是會自動換行的年，但是為什么我自己做的內容多了不會自動換行，而是會超出父框邊界呢？求解答！<!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;
-
高山彝人恩，的確可以了?？磥磉€是要多多學習css屬性呀！ -
weibo_木落繞指_0word-break是段落內換行，word-wrap是單詞內換行 -
高山彝人謝謝！
使用題主的代碼，在瀏覽器上實現的界面是沒有問題的，建議題主不要只是在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
提交
取消