Question

如何使用div标签创建此html布局？我正在尝试这段代码。但它没有用。我应该如何定位我的leftbottom div？我的代码出了什么问题？请帮帮我.........快点.....谢谢

<html>
    <head>

        <style>
            .container{
                margin-left: auto;margin-right: auto;
                width: 1000px;

            }
            .leftupper{
                width: 350px;
                height: 241px;
                background: red;
                float: left;
                clear: right;
            }
            .gallery{
                width: 630px;
                height: 600px;
                background: red;
                float: left;
                margin-left: 10px;
                margin-right: 10px;
            }
            .leftbottom{
                width: 350px;
                height: 200px;
                float: left;
                background-color: red
            }

        </style>


    </head>

    <body>
        <div class="container">

            <div class="leftupper">

            </div>
            <div class="gallery"></div>
            <div class="leftbottom"></div>

        </div>

    </body>
</html>

enter image description here

Answer 1

尝试更改

.gallery{
            width: 630px;
            height: 600px;
            background: red;
            float: left;
            margin-left: 10px;
            margin-right: 10px;
        }

到

 .gallery{
            width: 630px;
            height: 600px;
            background: red;
            float: right;
            margin-left: 10px;
            margin-right: 10px;
        }

http://jsfiddle.net/tuekdzph/1/

Answer 2

你应该使用这样的颜色：

 <style>
        .container{
            margin-left: auto;margin-right: auto;
            width: 1000px;
            overflow: auto; /* clear floats */
        }
        .left { float: left; width: 350px; }
        .right { float: left; width: 630px; }
        .left-upper{
            width: 100%;
            height: 241px;
            background: red;
        }
        .gallery{
            width: 100%;
            height: 600px;
            background: red;
        }
        .left-bottom{
            height: 200px;
            background-color: red
        }

    </style>

您的HTML应如下所示：

<div class="container">
  <div class="left">
    <div class="left-upper"></div>
    <div class="left-bottom"></div>
  </div>

  <div class="right">
   <div class="gallery"></div>
  </div>
</div>

使用div创建布局

2 个答案: