Question

我有一个div，其中包含其他div和应用了几个CSS类。现在，似乎一切只能在我的div的文本部分工作，其中没有文本，事件的nono和css的工作原理。

所有Jquery事件和CSS属性仅适用于div中包含的文本，而不适用于整个div。即使我只是尝试在css中为该div应用cursor: pointer;，或者甚至附加这样的事件处理程序：

$("#myDiv").on("click", function (event) {
    alert("works");
});

我尝试设置background-color，设置background-image，我尝试了click事件和on事件。什么都行不通。

HTML

<div id="content">
    <div id="meatBlock" class="blocks">
        PORK & BEEF
    </div>
    <div id="cheeseBlock" class="blocks">
        CHEESE & ONIONS
    </div>
</div>

CSS

以下是其中一个不起作用的内部Div的CSS：

.blocks
{
    float: left;
    width: 310px;
    height: 141px;
}
#content
{
    max-width: 975px; 
    min-width: 975px;
    margin: 0 auto;
    width: 50%;
}

如果我完全从css中删除float:left，它就可以了。我无法理解为什么因为我无法在jsfiddle中重现它。

任何人都有任何建议并知道这里发生了什么？我需要它才能在IE8 +中工作，所以不用担心chrome或firefox。

Answer 1

我发现了问题。

确实是float:left。

为了解决这个问题，我在所有使用float的div的末尾添加了一个<div style="clear: both">，并且神奇地将div的行为改回正常

CSS Float属性使DIV无法点击

HTML

CSS

1 个答案: