2015-08-26 3 views
0

Вот HTML кодПочему свойство float не работает, если установлена ​​ширина элементов?

<!doctype html> 
<html> 


<head> 
    <title>Float</title> 
    <link rel="stylesheet" type="text/css" href="Font Sizes.css"> 
</head> 



<body> 

    <div class="First"> 
     <img src="firstImage.png" alt="First Image of Article" class="FirstImage"> 
     <p> Picture No.1</p> 
    </div> 

    <div class="Second"> 
     <img src="secondImage.png" alt="Second Image of Article" class="SecondImage"> 
     <p>Picture No.2</p> 

    </div> 

</body> 

Вот CSS

.First{ 
 
    width:430px; 
 
    
 
    background-color: Red; 
 
    float: left; 
 
    
 
} 
 
.Second{ 
 
    width:330px; 
 
    
 
    background-color: Blue; 
 
    
 
    
 
}

Я пробовал разные трюки, но не удалось. Объясните это подробно. Я много искал, но не смог найти свой ответ. Второй элемент не устраивает его в правой части первого элемента. Когда я удаляю свойство ширины из второго элемента, оно упорядочивается справа. С Ширина объекта: enter image description here

Без Ширина собственности на втором элементе: enter image description here

+0

Ваше плавающее свойство действительно работает. Что ты хочешь делать? Поместите все это в одну строку? –

+0

Вы не предоставили достаточно информации. Убедитесь, что в контейнере достаточно места для размещения элементов рядом. –

ответ

1

DIV являются элементами уровня блока и вы поставляется только поплавок на First. Помещение поплавка на Second даст вам эффект, который вы желаете, если браузер шире 760 пикселей;

+0

В качестве альтернативы, установите «margin-left: 430px;' on '.Second' – Eraph

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