可以问下为什么是这样子的顺序么？

.box1{

height: 20px;background:red;float: left;font: 18px blue;

}

.box2{

height: 20px; background:blue;float: right;font: 18px red;

}

.box3{

height: 20px;margin:0 auto;background:navy;font: 20px black;text-align: center;

}

<div class="box3">world</div>

蝶梦疏妄

2016-10-21

源自：网页布局基础 3-1

关注问题我要回答

677

操作

收起

7 回答

浅雪暖阳2 回答被采纳 +3 积分
2016-10-25

为什么我按你上面的代码弄是在一行呢？我不知道你到底哪出问题了？看看你的 css哪出问题了？

0 回复有任何疑惑可以回复我~

收起回答

蝶梦疏妄提问者

额！让我静静

2016-10-25 回复有任何疑惑可以回复我~

蝶梦疏妄提问者

我好像懂了，是因为不带float的会自动扩充

2016-10-26 回复有任何疑惑可以回复我~

浅雪暖阳2
2016-10-26

总问我原因，不给代码，我咋知道哪出了问题？你最上面的代码就是你上面最开始的结果。至于你后来出现不在同一行的效果，我按照你原来的代码加个margin-top：-20px;就在一行了。至于你的问题我真不知道。

0 回复有任何疑惑可以回复我~

收起回答

蝶梦疏妄提问者

额！你运行一下，会发现一个是在一条线上面的，然后将box2和box3的内容换一下就会发现那不是在同一条线上面了，哪里没有给代码了？开头那不就是代码么？

2016-10-26 回复有任何疑惑可以回复我~

浅雪暖阳2
2016-10-25

margin-top：-20px;不好意思，上面的写错了。你把这弄上去看看是不是你要的。

0 回复有任何疑惑可以回复我~

收起回答

蝶梦疏妄提问者

结果不行，另外我问的是原因

2016-10-25 回复有任何疑惑可以回复我~

浅雪暖阳2
2016-10-25

你把.box3{margin-top=-20px;}加在对应的位置上就好了。

0 回复有任何疑惑可以回复我~

0 回复有任何疑惑可以回复我~

有点不明白你的意思，我不知道你到底想要什么样的效果？你把你想要的效果讲下，我看我是否可以帮到你。还有div是块级元素，你怎么可以用text-align: center;？这只可以让你div中的文本居中的，而你的div不可以居中。

0 回复有任何疑惑可以回复我~

收起回答

蝶梦疏妄提问者

额！text-align:center就是为了文本居中，不居中太难看，另外我想知道的是 <div class="box1">fire a fire</div> <div class="box2">over</div> <div class="box3">world</div> 这样子为什么显示出来的样子会变得一上一下

2016-10-23 回复有任何疑惑可以回复我~