ltt444280761
2015-10-21 07:22
采纳率: 100%
浏览 1.6k

关于CSS+DIV浮动的一个效果问题

我想让一行显示两个div块,等高,但是第一个是定宽的,第二个是自动占据这一行剩下的宽度

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • 牛坛子 2015-10-21 08:48
    已采纳
     <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                body,div{
                    margin: 0;
                    padding: 0;
                }
                .m-content:after{
                    display:block;
                    visibility:hidden;
                    clear:both;
                    height:0;
                    overflow:hidden;
                    content:'.';
                }
                .m-content{
                    width:100%;
                    height:24px;
                    line-height:24px;
                    zoom:1;
                }
                .m-content .g-left{
                    float:left;
                    width:100px;
                    background-color:#399521;
                }
                .m-content .g-right{
                    width:100%;
                    background-color:#39A4DC;
                }
            </style>
        </head>
        <body>
            <div class="m-content">
                <div class="g-left">left</div>
                <div class="g-right">right</div>
            </div>
        </body>
    </html>
    
    
    点赞 评论
  • FFurnace 2015-10-21 07:31

    编写代码时将第二个块的内容放到第一个块的前面,并将第二个块浮动到右侧,设置好第二个块和第二个块的高度相同,第二个就自动占据剩下的宽度。

    点赞 评论
  • ltt444280761 2015-10-21 07:54
     <html>
        <head>
            <title>aaa</title>
            <style>
                body{
                    padding:0;
                    margin:0;
                }
                #left{
                    height:100px;
                    width:100px;
                    background:black;
                    float:left;
                }
                #right{
                    height:100px;
                    width:100%;
                    background:blue;
                }
            </style>
        </head>
        <body>          
                <div id="left" ></div>
                <div id="right"></div>
        </body>
    </html>
    
    点赞 评论
  • 水煮花生巛 2015-10-21 07:59

    你这个写完的效果不就是自适应的了吗

    点赞 评论
  • luckygirl0617 2015-10-21 08:24

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

    Document
    div1
    div2

    body{padding:0px;margin:0px;}.div1{width:100px;height:100px;background-color:black;float:left;}.div2{height:100px;width:100%;background-color:blue;}

    点赞 评论

相关推荐 更多相似问题