如何修改样式 左浮动与高度怎么解决

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css"></style>
</head><body>
<div id='c' style="width:1000px;height:auto;margin:0 auto;text-align:center; background-color:#FFFF00 ">
<div id='l' style=" width:200px; height:200px; background-color:#FF0000; float:left">左边</div>
<div id='r'>右边</div>
</div>
</body>
</html>
代码如上了
加了float:left  可以让他们并排  但是外层div c的高度就没有
这该怎么半了
我得让里面的div并排
但是还得让外层的 div有高度

解决方案 »

  1.   

    你设了外层div的height:auto，外层的高度就与内容的高度相同了。
    如果你把外层div的height设置得比里面的div高度大，比如height:400px，你就能看到外层div了。
      

  2.   

    外层 div 的 height: auto，只是与内层 div 重合了而已！L@_@K
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    <style type="text/css"></style>
    </head><body>
    <div id='c' style="padding: 10px 10px 10px 10px;width:1000px;height:auto;margin:0 auto;text-align:center; background-color:#0000ff">
        <div id='l' style=" width:200px; height:200px; background-color:#FF0000; float:left">左边</div>
        <div id='r' style="background-color:#00ff00; height:200px">右边</div>
    </div>
    </body>
    </html>
      

  3.   

    lz 看 #2 的代码了么，把 background-color 区分开，然后给外层 div 加上 padding 就清楚了！
      

  4.   

    这样子可以么？可以就结了吧，这周还没得到分呢
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    <style type="text/css"></style>
    </head><body>
    <div style="width:1000px;height:auto;margin:0 auto;">
    <div id='c' style="width:1000px;height:auto;float:left;text-align:center; display:block; background-color:#FFFF00 ">
        <div id='l' style=" width:200px; height:200px; background-color:#FF0000; float:left;clear:both;display:inline;">左边</div>
        <div id='r' style="height:100%">右边</div>
    </div>
    </div>
    </body>
    </html>
      

  5.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    <style type="text/css"></style>
    </head><body>
    <div id='c' style="width:1000px;height:500px;margin:0 auto;text-align:center; background-color:#FFFF00 ">
        <div id='l' style=" width:200px; height:200px; background-color:#FF0000; float:left">左边</div>
        <div id='r' style="height:200px;background-color:blue">右边</div>
    </div>
    </body>
    </html>
      

  6.   

    不太清楚楼主是想要什么效果，不定高，左右对齐？
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    <style type="text/css"></style>
    </head><body>
    <div id='c' style="width:960px;margin:0 auto;background:#FF0000;">
        <div id='l' style="width:200px;float:left;">Side</div>
        <div id='r' style="background:#FFFF00;margin-left:200px;">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
        </div>
    </div>
    </body>
    </html>
      

  7.   

    lz想要这个效果？<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    <style type="text/css"></style>
    </head><body>
    <div id='c' style="width:1000px;height:auto;margin:0 auto;text-align:center; background:#999 ">
        <div id='l' style="width:200px; height:200px; background-color:#FF0000; float:left">左边</div>
        <div id='r' style="width:800px; background-color:#FF0; float:right">右边</div>
        <br style="clear:both" />
    </div>
    </body>
    </html>
      

  8.   

    绝对定位  body里加margin:0px padding:0px
      

  9.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    <style type="text/css"></style>
    </head><body>
    <div id='c' style="width:1000px;height:auto;margin:0 auto;text-align:center; background-color:#FFFF00 ">
        <div id='l' style=" width:200px; height:200px; background-color:#FF0000; float:left">左边</div>
        <div id='r'>右边</div>
        <div id='c' style="clear:thin;"></div>
    </div>
    </body>
    </html>加个清除层 ，写个样式为：清除：两者 就可以解决
      

  10.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    <style type="text/css"></style>
    </head><body>
    <div id='c' style="width:1000px;height:auto;margin:0 auto;text-align:center; background-color:#FFFF00 ">
        <div id='l' style=" width:200px; height:200px; background-color:#FF0000; float:left">左边</div>
        <div id='r'>右边</div>
        <div style="clear:both;border:0;height:1px;overflow:hidden"></div>
    </div>
    </body>
    </html>