请教一个关于浮动的问题

xiatianlong
  • 2.2k

画面如图所示:

clipboard.png

画面一个6个元素,用的是bootstrap格栅排版的,其实就是左浮动。

每个元素里默认都有一个下拉框,当第一个下拉框选中某个选项之后会出现第二个,当第二个下拉框选中某个选项之后会出现第三个,......

期望能达到如下图所示,下面一排能靠左去显示:

clipboard.png

请教大家有什么思路吗?

注:因为格栅做了响应式,在不同分辨率的设备上每行个数不确定。

回复
阅读 1.6k
4 个回答

每一项固定高度吧,或者在5,9。。。项上加上清除浮动的属性

可以换个思路,把银行卡那几个字相对定位,像贴标签一样,贴在每一项上,不占据空间,就不会导致排版变乱

给每个box添加一个固定高度,然后给下拉框设置position: relative

<html><head><style>
        body {
            margin: 100px;
        }
        div {
            width: 200px;
            height: 200px; /* here!! */
            float: left;
            margin: 30px;
            background: #804528;
        }
        div p {
            position: relative; /* and here!! */
        }
    </style>
</head>
<body>
    <div>
        <p>aaaaa</p>
        <p>aaaaa</p>
        <p>aaaaa</p>
        <p>aaaaa</p>
        <p>aaaaa</p>
        <p>aaaaa</p>
        <p>aaaaa</p>
        <p>bbbbb</p>
    </div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body></html>
王能全是谁
  • 1.1k

w3c上定义了浮动的规则
以下为第8第9条,可知向上的优先级别比向左高,这里可以向上,因此不能向左了

A floating box must be placed as high as possible.
A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

解决方法,我一般是改用inline-block代替float

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏