代码之家 › 专栏 › 技术社区 › WebDude

简单开放式分区布局

html

WebDude · 技术社区 · 14 年前

我正在为我的网站做一个简单的布局。
我希望此导航栏水平填充屏幕,但页面内容居中。
我已经设法做到了这一点,但当内容大于它预先定义的宽度时,它就会中断。
我只有几页的报表和表将设计扩展到比默认值更大的范围,所以希望这些页能够很好地扩展。
当前,当我的内容变宽时,它会拥抱容器的左边,但会将右边距挤出。
我希望这样可以将左右页边距平均地向外推,并保持在中间。
我怎样才能做到这一点?这是我当前的HTML:

<!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" xml:lang="en" lang="en">
 <head>
  <style>
   body{margin-top: 10; margin-bottom: 0; margin-left: 0; margin-right: 0; padding:0 0 0 0;}
   #main{width: 100%; margin: auto auto;min-height:100%;}
   #header{width: 740px;position:relative;margin: auto auto;border: 1px solid #000;border-bottom: none;background-image: url('/resources/images/General/hdr_bg.png');}
   #nav{width: 100%; text-align: center; height: 31px; margin: auto auto;background-color:#c3daf9;border-top:1px solid #000;border-bottom:1px solid #000;}
   #content{width: 740px;position:relative;margin: auto auto; padding-top: 10px;}
   #footer{position: absolute; font-size: 11px; color: Gray; border-top: 1px solid #303030; bottom: 0px; width: 100%;}
  </style>
 </head>
 <body>
  <div id="main">
   <div id="header">LOGO</div>
   <div id="nav">LINK | LINK | LINK</div>
   <div id="content">
    here is some contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
   </div>
   <div id="footer">footer content</div>
  </div>
 </body>
</html>

我做了一个非常长的词来模拟内容变得越来越宽。
在我的站点中,这通常是一个HTML表中的报告。

任何帮助都将不胜感激。谢谢!

编辑:

这不仅仅是关于可以被包装或破坏的文本。
考虑将上面的“ContentContentContent”替换为比其父DIV更宽的表:

<table border="1" width="800px"><tr><td>here is some content</td></tr></table>

此表现在接触到Content Div的左边框,但会推出Content Div的右边框。我希望它平均推出两个边框,并保持在中间

3 回复 | 直到 14 年前

Sidharth Panwar 14 年前

以下是操作方法(滚动到midimagic的帖子): http://www.daniweb.com/forums/thread57605.html

Vikash 14 年前

你需要用DIV内容包装单词。

您可以使用如下内容:

div#content {
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3  */
word-wrap: break-word; /* IE 5.5+ */
}

WebDude 14 年前

有人不是这个网站的成员,他设法帮我解决了这个问题。
我们所做的是将内容DIV设置为100%,然后在内容周围放置一个DIV,并使用align=“center”

<div align="center"><table border="1" width="1000px" ><tr><td>here is some content</td></tr></table></div>

整个解决方案:

<!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" xml:lang="en" lang="en"> 
    <head> 
        <style> 
            body{margin-top: 10; margin-bottom: 0; margin-left: 0; margin-right: 0; padding:0 0 0 0;} 
            #main{width: 100%; margin: auto auto;min-height:100%;} 
            #header{width: 740px;position:relative;margin: auto auto;border: 1px solid #000;border-bottom: none;background-image: url('/resources/images/General/hdr_bg.png');} 
            #nav{width: 100%; text-align: center; height: 31px; margin: auto auto;background-color:#c3daf9;border-top:1px solid #000;border-bottom:1px solid #000;} 
            #content{width: 100%;position:relative;margin: auto auto; padding-top: 10px;border: solid 1px;}
            #footer{position: absolute; font-size: 11px; color: Gray; border-top: 1px solid #303030; bottom: 0px; width: 100%;} 
        </style> 
    </head> 
<body> 
    <div id="main"> 
        <div id="header"><br/>LOGO<br/></div> 
        <div id="nav">LINK | LINK | LINK</div> 
        <div id="content">
            <div align="center"><table border="1" width="1000px" ><tr><td>here is some content</td></tr></table></div>
        </div> 
        <div id="footer">footer content</div> 
    </div> 
</body>