CSS基本布局16例(3)
单行三列3：三列都绝对定位。左列和右列固定宽度，中间列根据内容自适应。
#left { position: absolute; top: 0px; left: 0px; margin: 20px; padding: 10px; border: 5px solid #666; background: #FFF; width: 150px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 120px; } html>body #left { width: 120px; /* ie5win fudge ends */ } #middle { position: absolute; margin: 20px 190px 20px 190px; top: 0px; left: 0px; padding: 10px; border: 5px solid #666; background: #FFF; } #right { position: absolute; top: 0px; right: 0px; /* Opera5.02 will show a space at right when there is no scroll bar */ margin: 20px; padding: 10px; border: 5px solid #666; background: #FFF; width: 150px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 120px; } html>body #right { width: 120px; /* ie5win fudge ends */ }
单行三列4(推荐)：类似样式2，只是将margin: 20px属性增加在body样式中，解决了中间列在Netscape6.0中置顶的问题。
body { margin: 20px 0px 0px 0px; /* n6.01win-mac won't recognize top margin for middle box, so it goes here */ padding: 0px 0px 0px 0px; font-family: verdana, arial, helvetica, sans-serif; color: #060; background-color: #CCC; } #left { position: absolute; top: 0px; left: 0px; margin: 20px; padding: 10px; border: 5px solid #666; background: #FFF; width: 150px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 120px; } html>body #left { width: 120px; /* ie5win fudge ends */ } #middle { margin: 0px 190px 20px 190px; /* n6.01win n6mac won't recognize top margin for middle box, so it goes in body */ padding: 10px; border: 5px solid #666; background: #FFF; } #right { position: absolute; top: 0px; right: 0px; /* Opera5.02 will show a space at right swhen there is no scroll bar */ margin: 20px; padding: 10px; border: 5px solid #666; background: #FFF; width: 150px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 120px; } html>body #right { width: 120px; /* ie5win fudge ends */ }
单行三列3：三列都绝对定位。左列和右列固定宽度，中间列根据内容自适应。