.container { /* 清除浮动，防止父元素高度塌陷 */ overflow: hidden; /* 或者使用伪元素清除浮动 */}.float-left-image { float: left; margin-right: 15px; width: 200px; height: auto;}.column { float: left; width: 30%; padding: 10px; box-sizing: border-box;}
.parent-relative { position: relative; width: 300px; height: 200px; border: 1px solid #ccc;}.child-absolute { position: absolute; top: 10px; right: 10px; width: 50px; height: 50px; background-color: lightblue; /* 控制层叠顺序 */ z-index: 10;}.fixed-header { position: fixed; top: 0; left: 0; width: 100%; background-color: #333; color: white; padding: 10px 0; text-align: center; z-index: 1000; /* 确保它在最上层 */}
.nav-item { display: inline-block; padding: 10px 15px; margin: 0 5px; background-color: #f0f0f0; border: 1px solid #ccc; vertical-align: top; /* 解决基线对齐问题 */}.product-card { display: inline-block; width: 280px; margin: 10px; padding: 15px; border: 1px solid #eee; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); vertical-align: top;}
.flex-container { display: flex; /* 开启Flexbox布局 */ justify-content: space-between; /* 子元素在主轴上的对齐方式 */ align-items: center; /* 子元素在交叉轴上的对齐方式 */ flex-wrap: wrap; /* 子元素是否换行 */ gap: 10px; /* 子元素之间的间距 */}.flex-item { flex: 1; /* 允许项目伸缩 */ min-width: 100px; /* 最小宽度，防止过度收缩 */ padding: 15px; background-color: #e0f7fa; text-align: center;}
.grid-container { display: grid; /* 开启Grid布局 */ /* 定义列：三列，第一列200px，第二列自适应，第三列1fr（剩余空间） */ grid-template-columns: 200px 1fr 1fr; /* 定义行：两行，第一行50px，第二行自适应 */ grid-template-rows: auto 1fr; gap: 20px; /* 行和列之间的间距 */ height: 100vh; /* 示例高度 */}.header { grid-column: 1 / span 3; /* 占据1到3列 */ background-color: #f8d7da; padding: 20px;}.sidebar { grid-column: 1; /* 占据第1列 */ grid-row: 2; /* 占据第2行 */ background-color: #d4edda; padding: 20px;}.main-content { grid-column: 2 / span 2; /* 占据第2到第3列 */ grid-row: 2; /* 占据第2行 */ background-color: #cce5ff; padding: 20px;}
.article-content { column-count: 3; /* 将内容分成3列 */ column-gap: 30px; /* 列之间的间距 */ column-rule: 1px solid #ccc; /* 列之间的分隔线 */ padding: 20px; border: 1px solid #eee;}/* 标题不分列 */.article-content h2 { column-span: all; /* 让标题跨越所有列 */ text-align: center; margin-bottom: 20px;}
.table-like-container { display: table; /* 让div表现得像| */ padding: 10px; border: 1px solid #ddd; vertical-align: middle; /* 轻松实现垂直居中 */ width: 33.33%; /* 示例：等宽三列 */}
以上就是HTML div布局有哪些方法？替代table的7种div技巧的详细内容，更多请关注创想鸟其它相关文章！ 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 赞 (0)
打赏
微信扫一扫
支付宝扫一扫
关于作者
相关推荐
 |
