clearfix не работает на переполнение: авто

Я очень плохо с CSS, так что кто-то может помочь мне:clearfix не работает на переполнение: авто

я следующий 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 будет работать, но это тоже не сработает. Может кто-нибудь помочь мне, я застрял в течение нескольких часов теперь ... :(

источник

2015-10-26 Undefined Variable

Put что Див сразу после плавали квадратных пальцы и изменения от 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>

источник

2015-10-26 18:40:03

Спасибо, сэр! Это сработало! Я отвечу на ваш ответ, как только я смогу. –

clearfix не работает на переполнение: авто

ответ

Смежные вопросы