none
ie中的 css 的float标签的使用问题。 RRS feed

 > 

  • 问题

  • Question
    登录进行投票
    0
    登录进行投票

    下面这个html 代码中sidebar_a,sidebar_b,content,这3个框体如何才能并列一起。现在是分行了。

    将这3个框体放在同一个div里面我试过了。不行。求高人解决。在ie,5.6.7里面的显示问题。。谢谢。。

     

     

    －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

    代码：

     

    <html>
      <head>
        <title>Chapter 11:Classic Layouts</title>
        <style type="text/css">
          #masthead{
            padding:10px;
            border:1px solid #000;
            background-color[:#]CCC;
            margin-bottom:10px;
          }
          #sidebar_a{
            float:left;
            width:25%;
            margin-bottom:10px;
            padding:10px;
            border:1px solid #000;
          }
          #sidebar_b{
            float:right;
            width:25%;
            margin-bottom:10px;
            padding:10px;
            border:1px solid #000;
          }
          #content{
            margin-left:30%;
            margin-right:30%;
            margin-bottom:10px;
            padding:10px;
            border:1px solid #000;
          }
        </style>
      </head>
      <body>
         <div id="masthead">
           <h2>masthead</h2>
         </div>
           <div id="sidebar_a">
           <h2>sidebar A</h2>
           <ul>
             <li>Item one</li>
             <li>Item twe</li>
             <li>Item three</li>
             <li>Item four</li>
             <li>Item five</li>
           </ul>
         </div>
          <div id="content">
           <h2>content</h2>
           <p>contentcontentcontentcontentcontentcontentco
           ntentcontentcontentcontentcontentcontentcontent
           contentcontentcontentcontentcontentcontentconte
           ntcontentcontentcontentcontentcontentcontentcon
           tentcontentcontentcontentcontentcontentcontentc
           ontentcontentcontentcontentcontentcontentconten
           ntentcontentcontentcontentcontentcontentcontent
           contentcontentcontentcontentcontentcontentconte
           ntcontentcontentcontentcontentcontentcontentcon
           tentcontentcontentcontentcontentcontentcontentc
           </p>
         </div>
         </div>
         <div id="sidebar_b">
           <h2>sidebar B</h2>
           <ul>
             <li>Item one</li>
             <li>Item twe</li>
             <li>Item three</li>
             <li>Item four</li>
             <li>Item five</li>
           </ul>
         </div>
       </div>
      </body>
    </html>
    2008年5月6日 2:52
    |

答案

  • Question
    登录进行投票
    0
    登录进行投票

    浮动的元素应该在固定的元素前面定义。

    因此简单地把 sidebar_b 放到 content 前面就可以了。

    像这样的：

    Code Snippet

    <div id="sidebar_a"></div>

    <div id="sidebar_b"></div>

    <div id="content"></div>

     

     

    2008年5月6日 3:26
    |

全部回复

  • Question
    登录进行投票
    0
    登录进行投票

    浮动的元素应该在固定的元素前面定义。

    因此简单地把 sidebar_b 放到 content 前面就可以了。

    像这样的：

    Code Snippet

    <div id="sidebar_a"></div>

    <div id="sidebar_b"></div>

    <div id="content"></div>

     

     

    2008年5月6日 3:26
    |
  • Question
    登录进行投票
    0
    登录进行投票

     

    一般来说中间的content需要使用绝对定位。添加position:absolute;left:**px;属性即可。
    2008年5月6日 3:43
    |
  • Question
    登录进行投票
    0
    登录进行投票

    代码根据两位版主的意见调整如下：

    但还是换汤不换药，还是有问题，不同分辨率下有问题。

    后面如果跟一个元素。还是有很多问题。

    各位还有更详细的解决方法吗？

     

     

    <html>
      <head>
        <title>Chapter 11:Classic Layouts</title>
        <style type="text/css">
          #masthead{
            padding:10px;
            border:1px solid #000;
            background-colorCCC;
            margin-bottom:10px;
          }
          #sidebar_a{
            float:left;
            width:25%;
            margin-bottom:10px;
            padding:10px;
            border:1px solid #000;
          }
          #sidebar_b{
            float:right;
            width:25%;
            margin-bottom:10px;
            padding:10px;
            border:1px solid #000;
          }
          #content{
            position:absolute;
            left:0px;

            margin-left:30%;
            margin-right:30%;
            margin-bottom:10px;
            padding:10px;
            border:1px solid #000;
            width:150px;
          }
          #footer{
            position:absolute;
            top:500px;

            margin:10px 0 0 0;
            padding:10px;
            border:1px solid #000;
            background-color[:#]CCC;
            width:760px;
            voice-family:"\"}\"";
            voice-family:inherit;
            width:738px;
          }
        html>body #footer{
          width:738px;
        }
        </style>
      </head>
      <body>
         <div id="masthead">
           <h2>masthead</h2>
         </div>
           <div id="sidebar_a">
           <h2>sidebar A</h2>
           <ul>
             <li>Item one</li>
             <li>Item twe</li>
             <li>Item three</li>
             <li>Item four</li>
             <li>Item five</li>
           </ul>
         </div>
         <div id="sidebar_b">
           <h2>sidebar B</h2>
           <ul>
             <li>Item one</li>
             <li>Item twe</li>
             <li>Item three</li>
             <li>Item four</li>
             <li>Item five</li>
           </ul>
         </div>
          <div id="content">
           <h2>content</h2>
           <p>contentcontentcontentcontentcontentcontentco
           ntentcontentcontentcontentcontentcontentcontent
           contentcontentcontentcontentcontentcontentconte
           ntcontentcontentcontentcontentcontentcontentcon
           tentcontentcontentcontentcontentcontentcontentc
           ontentcontentcontentcontentcontentcontentconten
           ntentcontentcontentcontentcontentcontentcontent
           contentcontentcontentcontentcontentcontentconte
           ntcontentcontentcontentcontentcontentcontentcon
           tentcontentcontentcontentcontentcontentcontentc
           </p>
         </div>
          <div id="footer">
          <p>Footer</p>
        </div>
         </div>
       </div>
      </body>
    </html>

    2008年5月7日 15:03
    |