1. 首页
  2. 问答
  3. 如何使用html和css创建这个特定的布局？

如何使用html和css创建这个特定的布局？

2011-01-26 91 views

回答

2

@Bmaster

嗨，老兄，我摆弄周围，终于找到了我认为是你“再要求...看看：

http://jsfiddle.net/2pXpN/

Preview of the layout

对我来说是越来越文本决定整个事情的高度最难的部分 - 但之后，我不再试图用花车，它都解决了;）

尝试增加一些文字，等等它应该工作！

编辑：我不确定你是否想要顶部的'header'，但是我在这里放置了一个：http://jsfiddle.net/bHhd8/。 *注意，它在包装外，否则侧栏会变得太高！

来源

2011-01-26 22:21:26 jlmakes

1

有一些它我不喜欢，但它确实有效。

<!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"> 
<head> 
    <title>Test</title> 
    <style type="text/css"> 
     body 
     { 
      padding: 0; 
      margin: 0; 
     } 

     #content 
     { 
      background-color: #cccccc; 
      min-height: 100%; 
     } 

     #header 
     { 
      height: 40px; 
      background-color: #666666; 
     } 

     #left 
     { 
      float: left; 
      width: 33%; 
     } 

     #mid 
     { 
      margin: 0 33%; 
      background-color: #6666ff; 
     } 

     #right 
     { 
      float: right; 
      width: 33%; 
      margin-top: -50px; 
     } 

     .fixedHeight 
     { 
      height: 50px; 
      background-color: #ffff33; 
     } 

     #left .fixedHeight 
     { 
      margin-right: 10px; 
      margin-bottom: 10px; 
     } 

     #right .fixedHeight 
     { 
      margin-left: 10px; 
     } 

     .clear 
     { 
      clear: both; 
     } 
    </style> 
</head> 
<body> 
    <div id="header"> 
     header 
    </div> 
    <div id="content"> 
     <div id="left"> 
      <div class="fixedHeight"> 
       fixed 
      </div> 
      <div class="fixedHeight"> 
       fixed 
      </div> 
     </div> 
     <div id="mid"> 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text 
     </div> 
     <div class="clear"></div> 
     <div id="right"> 
      <div class="fixedHeight"> 
       fixed 
      </div> 
     </div> 
    </div> 
</body> 
</html>

来源

2011-01-26 22:18:10 mynameiscoffey

1

由于ornage盒子的高度是固定的，所以可以绝对放置它们。对于右下角的。这应该是自explanitory：

.orange-box { 
    width:33%; 
    height:100px; 
    position:absolute; 
} 

.orange-box.top-left-1 { top:0; left:0; } 
.orange-box.top-left-2 { top:100px; left:0; } 
.orange-box.bottom-right { bottom:0; right:0; }

蓝色区域应与另一个DIV

width:33%; 
margin:0 auto

来源

2011-01-26 22:20:16 meagar

1

在审查了其他似乎并不完全得到你想要的答案后，我决定抛出我自己的jsfiddle answer。

比解决问题更重要的是帮助您了解解决方案，这需要了解floats,clears和positioning。

这些列由#footer清除，它当前不包含任何内容，但有助于将页面大小扩展到包装以外。

#page元素相对定位，因此绝对定位的子元素将相对于它定位，而不是body。

来源

2011-01-26 23:19:50 zzzzBov

+0

谢谢你帮助我理解，+1 – bmaster 2011-01-30 02:14:37

相关问题

 相关问题