css，固定大小

我需要三個表格（div）。佔用50％空閒窗口的左側和右側。該中心已修復。css，固定大小

一切似乎都很好，但正好可以跳下桌子。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<style type="text/css"> 
body{ 
    margin:0; 
    padding:0; 
} 
#left{ 
    float: left; 
    width: 50%; 
    background: #FDA02E; 
    margin-left: -300px; 
} 
#center{ 
    float: left; 
    width: 600px; 
    margin-right: 300px; 
    background: #C8FF98; 
} 
#right{ 
    float: left; 
    width: 50%; 
    margin-left: -300px; 
    background: #FDE95E; 
} 
</style> 
</head> 
<body> 
<div id="pag"> 
    <div id="left"> 
     Left 
    </div> 
    <div id="center"> 
     Center 
    </div> 
    <div id="right"> 
     Right 
    </div> 
</div> 
</body> 
</html>

來源

2010-04-09 lolalola

該解決方案爲您提供了內容沒有重疊。（我已經添加邊框到側欄以顯示此內容）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<style type="text/css"> 
body{ 
    margin:0; 
    padding:0; 
} 
#left-wrapper{ 
    width: 50%; 
    float: left; 
    margin-right: -600px; 
    padding-right: 300px; 
} 
#left { 
    margin-right: 300px; 
    background: #FDA02E; 
    border: 1px solid black; 
} 
#center{ 
    float: left; 
    width: 600px; 
    margin-right: -300px; 
    background: #C8FF98; 
} 
#right-wrapper{ 
    width: 50%; 
    float: left; 
} 
#right { 
    margin-left: 300px; 
    background: #FDE95E; 
    border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<div id="pag"> 
    <div id="left-wrapper"> 
     <div id="left"> 
      Left<br><br> 
     </div> 
    </div> 
    <div id="center"> 
     Center<br><br><br><br><br><br><br><br><br><br><br><br> 
    </div> 
    <div id="right-wrapper"> 
     <div id="right"> 
      Right<br><br><br><br> 
     </div> 
    </div> 
</div> 
</body> 
</html>

來源

2010-04-09 14:53:06 cowbellemoo

我有點不明白背後的想法，但這裏是一個工作版本：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<style type="text/css"> 
body{ 
    margin:0; 
    padding:0; 
} 
#left{ 
    float: left; 
    width: 50%; 
    background: #FDA02E; 
} 
#center{ 
    position: absolute; 
    width: 600px; 
    left: 50%; 
    margin-left: -300px; 
    background: #C8FF98; 
} 
#right{ 
    float: right; 
    width: 50%; 
    margin-left: -300px; 
    background: #FDE95E; 
} 
</style> 
</head> 
<body> 
<div id="pag"> 
    <div id="left"> 
     Left 
    </div> 
     <div id="center"> 
     Center 
    </div> 
    <div id="right"> 
     Right 
    </div> 
</div> 
</body> 
</html>

來源

2010-04-09 14:17:04

+1不錯的一個。打敗我吧。 – 2010-04-09 14:19:45

css，固定大小

回答

相關問題