Question

我对css非常不好，所以有人可以帮助我：

我有以下html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Cluster Test</title>
  <link rel="stylesheet" href="assets/style.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script src="assets/script.js"></script>
  <style>
   .square-thumb
    {
        float: left;
        margin:5px !important;
        padding:5px;
        cursor: pointer;
    }

    .clearfix {
        overflow: auto;
    }
  </style>
</head>
<body>
<div class='img-container'>
<div class=' square-thumb'><img src='images1/1919812643.jpg'></div>
<div class=' square-thumb'><img src='images1/1919814776.jpg'></div>
<div class=' square-thumb'><img src='images1/1919816424.jpg'></div>
<div class=' square-thumb'><img src='images1/1919817149.jpg'></div>
</div>
<div class='clearfix'></div>
<hr>
<div class='new_div' style='width:300px;height:300px;border:1px solid grey;'>
THIS IS MY NEW DIV
</div>
</body>
</html>

我的问题是new_div没有正确呈现。背景颜色没有显示，高度和宽度不存在等。

如果我在CSS中评论以下行，它可以正常工作：

float: left;

我在某处读到添加clearfix div会起作用，但它也不起作用。任何人都可以帮助我，我已经被困了好几个小时...... :(

Answer 1

将该div放在浮动的方形拇指之后，并从oveflow:auto更改为clear:both。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Cluster Test</title>
  <link rel="stylesheet" href="assets/style.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script src="assets/script.js"></script>
  <style>
   .square-thumb
    {
        float: left;
        margin:5px !important;
        padding:5px;
        cursor: pointer;
    }

    .clearfix {
      clear:both;
    }
  </style>
</head>
<body>
<div class='img-container'>
<div class=' square-thumb'><img src='images1/1919812643.jpg'></div>
<div class=' square-thumb'><img src='images1/1919814776.jpg'></div>
<div class=' square-thumb'><img src='images1/1919816424.jpg'></div>
<div class=' square-thumb'><img src='images1/1919817149.jpg'></div>
<div class='clearfix'></div>
</div>
<hr>
<div class='new_div' style='width:300px;height:300px;border:1px solid grey;'>
THIS IS MY NEW DIV
</div>
</body>
</html>

clearfix不适用于overflow：auto

1 个答案: