Question

我试图只编写CSS工具提示。我担心目标人群可能会禁用JS：

<div id=items>
    <div id=c1 class=container>
        <input type=image class=option id=o1 value=Sample></input>
        <label for=o1 class=name>
            OxyClean
        </label>
        <label for=o1 class=price>
            $19.95
        </label>
    </div>
    <div id=c2 class=container>
        <input type=image class=option id=o2 value=Sample></input>
        <label for=o2 class=name>
            ShamWow
        </label>
        <label for=o2 class=price>
            $19.95
        </label>
    </div>
    <div id=c3 class=container>
        <input type=image class=option id=o3 value=Sample></input>
        <label for=o3 class=name>
            Gopher
        </label>
        <label for=o3 class=price>
            $19.95
        </label>
    </div>
    <div id=c4 class=container>
        <input type=image class=option id=o4></input>
        <label for=o4 class=name>
            Mighty Tape
        </label>
        <label for=o4 class=price>
            $19.95
        </label>
    </div>
</div>

CSS：

div,label{
    position:absolute; /*Note This*/
}
#items{
    width:100%;
    height:200px;
}
.container{
    width:200px;
    overflow:hidden;
    position:relative;   /*And This*/
}
.container:hover{
    height:300px;
}
.option,.price,.name{
    left:0%;width:100%;
}
.option{
    height:200px;
}
.price,.name{
    height:50px;
}
.price{
    top:250px;   
}
.name{
    top:200px;   
}

当通过删除其中一条注释行来绝对定位容器时，工具提示有效，但我不想硬编码或使用脚本来生成这些位置。这就是我希望使用静态定位的原因。

不幸的是，静态定位导致overflow属性停止运行（没有浏览器记录冲突）：

Desired View:

*------------------------------------------------------------------------*
|*-------**-------**-------**-------**-------**-------**-------**-------*|
||       ||       ||       ||       ||       ||       ||       ||       ||
||       ||       ||       ||       ||       || FOCUS ||       ||       ||
||       ||       ||       ||       ||       ||       ||       ||       ||
||       ||       ||       ||       ||       ||       ||       ||       ||
|*-------**-------**-------**-------**-------*|-------|*-------**-------*|
*---------------------------------------------|-------|------------------*
                                              *-------*
Actual View:

*------------------------------------------------------------------------*
|*-------*                                                               |
||       |                                                               |
|| FOCUS |                                                               |
||       |                                                               |
||       |                                                               |
||-------|                                                               |
*|-------|---------------------------------------------------------------*
 *-------*                                                               
 *-------*
 |       | 
 |       | 
 |       | 
 |       | 
 |-------| 
 |-------| 
 *-------*

有什么建议吗？我们在所有div中走得太远，绝对是改变第一个着名的CSS属性的路线。

编辑：

http://jsfiddle.net/w3v8394r/1/

立场：相对定位解决了重大问题（感谢Aaron），但不是全部： - 物品不会水平堆叠。

Answer 1

将float: left;添加到.container。

修改

我喜欢它。中心怎么样？

而不是float: left使用display: inline-block并将text-align: center添加到#items

并将vertical-align: top;添加到.container

http://jsfiddle.net/w3v8394r/3/

Answer 2

谢谢Aaron，我需要的答案是：

.container{
    position:relative;
    display:inline-block;
    vertical-align:top;
}

静态定位和溢出

2 个答案: