个人中心
gpt4 book ai didi

html - 占 margin 的百分比？合计 100%

转载 作者：太空宇宙 更新时间：2023-11-04 14:04:12 27 4
gpt4 key购买 nike

想要制作一个看起来像这样的网格，其中 div/section 以百分比表示。 margin 在任何地方都是一样的。 http://www.ladda-upp.se/bilder/giefekcmgwmnx/

如果我将边距设置为 1px，则以下代码有效，但我想使用 1em 或 10px 左右的边距。我怎么做？

html

<html>
    <head>
        <title>Title</title>
        <link rel="stylesheet" type="text/css" media="all" href="default.css" /> 
    </head>
    <body>
    <div class="box small"></div>
    <div class="box small"></div>
    <div class="box small"></div>
    <div class="clear"></div>
    <div class="box small"></div>
    <div class="box large"></div>
    </body>
</html>

CSS

.box {
    height:50px;
    margin:1em;
    background:#000;
    float:left;
}
.small {
    width:33%;
}
.large {
    width:66%;
}
.clear{
    clear:both;
}

最佳答案

代替边距，使用透明或白色边框以及 box-sizing 属性

.box {
    height: 50px;
    border: 1em solid #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #000;
    float: left;
}

这样做，为 large (66%) 和 small (33%) 框定义的宽度将包括边框宽度。当然，更改边框颜色以适合您的实际背景。

关于html - 占 margin 的百分比？合计 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21259784/

27 4 0
文章推荐： java - StAX/StAX2 属性在源 XML 中的位置
文章推荐： javascript - 我想使用 jquery 在标签之间附加 anchor 文本
文章推荐： java - Java中读取JSON文本数据
文章推荐： javascript - 标签或 div 标签中的 data-... 有什么作用
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com