作者ccchiccchi (ccchi)
看板Web_Design
标题[问题] 如何设定display让物件垂直并列
时间Tue Apr 23 23:50:16 2019
各位前辈好
本版首po请多指教
有问题想请教大家...
在视窗过小的状况下
不管display如何设定都无法让物件 不 互相重叠
如果设定float:left;
则是container的显示又变得诡异。
目前物件有
div(contianer)
nav
section*2
想要的效果是 当视窗缩小
可以呈现
nav
section1
section2
的状态(也就是 nav会把section1的内容挤到下一行)
遇到的问题是nav跟section1的内容老是重叠在一起
(可是section1 2很正常)
如果用图表示是这样
https://imgur.com/kYGmE9x
请问应该怎麽设定才对呢?
谢谢大家
--
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 218.35.165.45
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1556034621.A.D00.html
1F：推 kids8649: 设定float的位置是哪边&有用clear清除浮动造成的影响吗@ 04/24 00:04
2F：→ kids8649: @？ 04/24 00:04
3F：推 kids8649: 或是用flex解，可能比较快吧 04/24 00:06
我用媒体查询
min-width:600px的时候让nav float:left
然後目前display的部分都是设定在 max-width:599px的条件里
并没有clear
我以为如果是这样的状况应该不用特别做clear...?
我会再试试看的
然後flex正在研究中...
※ 编辑: ccchiccchi (218.35.165.45), 04/24/2019 00:11:38
4F：→ kids8649: 你可以透过开发者工具那边看看nav在伸缩视窗时候的设定 04/24 00:20
5F：→ cqwt: 用 flex 去解 04/24 01:00
7F：→ iamaustin316: 这样是否是你要的 04/24 01:19
9F：推 pandaz79418: 把float取消掉就可以了 会重叠就是他还浮在上层 04/24 01:33
10F：→ ccchiccchi: 嗯嗯嗯就是想做i大那样的效果！p大也谢谢，晚点有电脑 04/24 07:27
11F：→ ccchiccchi: 我再试试看，不好意思手机版我只会用箭头回～感谢大家 04/24 07:27
12F：→ ccchiccchi: ！ 04/24 07:27
13F：推 LipaCat5566: flex 04/24 07:36
14F：推 ben91lin: flex的话，一样nav跟main，@media主轴row/column换一下 04/30 19:29
15F：→ ben91lin: 就好 04/30 19:29
16F：推 LannisterImp: flex最快 06/08 13:42
17F：推 Gurio: 最讨厌用float 用inline-block flex 06/22 02:52