点点滴滴

最新推荐文章于 2024-06-25 17:37:44 发布

强直也要学编程

最新推荐文章于 2024-06-25 17:37:44 发布

阅读量53

点赞数

本文链接：https://blog.csdn.net/weixin_52374211/article/details/115531923

版权

本文探讨了前端布局中的常见问题，包括等高布局、定宽与自适应布局以及宽度等分的实现方法。通过使用`display: table`、`flexbox`和浮动元素等技术，详细介绍了不同场景下的最佳实践，旨在帮助开发者创建更加灵活和响应式的网页布局。

摘要由CSDN通过智能技术生成

等高：

<div class=”parent”>
    <div class=”left”>left</div>
    <div class=”right”>
        <p>right</p>
        <p>right</p>
    </div>
</div>
.parent{
    display:table;
    width:100%;
    table-layout:fixed;
}
.left,.right{
    display:table-cell;
}
//or
.parent{
    display:flex;
}
//or
.parent{
    overflow:hidden;
}
.left{
    float:left;
}
.left,.right{
    padding-bottom:9999px;
    margin-bottom:-9999px;
}

定宽与自适应：

<div class=”parent”>
    <div class=”left”>left</div>
    <div class=”right”>
        <p>right</p>
        <p>right</p>
    </div>
</div>
.left{
    float:left; 	
    width:100px;
} 
.right{
    margin-left:110px;
}
//or
.left{
    float:left; 
    width:100px; 
    margin-right:10px;
} 
.right{
    overflow:hidden;
}
//or
.parent{
    display:table;
    width:100%;
    table-layout:fixed;
}
.left,.right{
    display:table-cell;
}
.left{
    width:100px;
    padding-right:10px;
}

...

<div class=”parent”>
    <div class=”left”>left</div>
    <div class=”right-fix”>
        <div class=”right”>
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>
.left{
    float:left;
    width:100px;
    position:relative;
}
.right-fix{
    float:right;
    width:100%;
    margin-left:-100px;
}
.right{
    margin-left:110px;
}
//or
.parent{
    display:flex;
} 
.left{
    width:100px;
    margin-right:10px;
} 
.right{
    flex:1;
}

宽度等分：

<div class=”parent-fix”>
    <div class=”parent”>
        <div class=”column”>1</div>
        <div class=”column”>2</div>
        <div class=”column”>3</div>
    </div>
</div>
.parent-fix{
    margin-left:-10px;
}
.parent{
    display:table;
    width:100%;
    table-layout:fixed;
}
.column{
    display:table-cell; 
    padding-left:10px;
}
//or
.parent{
    dispaly:flex;
} 
.column{
    flex:1;
]
.column+.column{
    margin-left:10px;
}