如图，html宽度计算不是很懂

Samding · 发表于 2019-11-21 21:39

本帖最后由 Samding 于 2019-11-21 22:32 编辑

前两张图是教程里面的代码，图3是我的代码想问一下为什么我的代码第一行的5会掉下去呢
为什么教材里面就不会呢，不都是子元素总宽度等于父元素宽度 + 最后一个子元素 margin-right:0吗
教材里面的应该是 50x4 + 18x3 + 1x2x4 = 262px
我的应该是 50x5 + 18x4 + 1x2x5 = 332px 哪里出错了？
最后一行用弹性盒的不用管，作个对比

hao5205420 · 发表于 2019-11-21 22:09

教程里的是section标签你的是div

Samding · 发表于 2019-11-21 22:13

hao5205420 发表于 2019-11-21 22:09
教程里的是section标签你的是div

section和div没有宽度上的不同啊，语义标签而已

smldhz · 发表于 2019-11-21 22:16

[CSS] 纯文本查看 复制代码

.h div{float:left;margin-right:18px;}
.h:last-child{margin-right:0;}

你这样的last-child是不会选到div的

[CSS] 纯文本查看 复制代码

.h .mm{float:left;margin-right:18px;}
.mm:last-child{margin-right:0;}

[HTML] 纯文本查看 复制代码

<div class="samding h">
			<div class="mm">1</div>
			<div class="mm">2</div>
			<div class="mm">3</div>
			<div class="mm">4</div>
			<div class="mm">5</div>
		</div>

这样就行了

smldhz · 发表于 2019-11-21 22:17

你可以看看这个问题的答案，采纳那个
https://segmentfault.com/q/1010000011647969

天灾丶人灬 · 发表于 2019-11-21 22:17

css里面错了
.h:last-child选中的是叫中间应该有个空格,或者.h div:last-child

ssh0221 · 发表于 2019-11-21 22:25

6楼说的对的 .h : last-child 改为 .h div : last-child

不然选不到div。这样margin-right : 0 也就不生效了。当然会跑下面去了。

Samding · 发表于 2019-11-21 22:26

天灾丶人灬发表于 2019-11-21 22:17
css里面错了
.h:last-child选中的是叫中间应该有个空格,或者.h div:last-child

非常感谢，我的超级懒虫css写法果然出现了细节问题

Samding · 发表于 2019-11-21 22:29

smldhz 发表于 2019-11-21 22:17
你可以看看这个问题的答案，采纳那个
https://segmentfault.com/q/1010000011647969

谢谢，我的懒虫css写法终于翻车了

天灾丶人灬 · 发表于 2019-11-21 22:42

Samding 发表于 2019-11-21 22:26
非常感谢，我的超级懒虫css写法果然出现了细节问题

细节决定成败,我也经常懒虫写法

帐号		自动登录	找回密码
密码			注册[Register]

[已解决] 如图，html宽度计算不是很懂