float left не работает

Question

Я новичок в HTML и CSS. Вот моя проблема.

Кодекс:

.floatleft {float: left} 
.floatright {float: right} 
.colum{width: 1170px; margin: 0 auto;} 
.fix {overflow: hidden} 
.clear {clear: both} 

<div class="services_area"> 
    <div class="colum"> 
    <div class="services"> 
     <div class="services_title fix"> 
     <h1>About Me</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <span>quis nostrud exercitation ullamco</span> laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor.</p> 
     </div> 
    </div> 
    <div class="services_list"> 
     <div class="ss_list floatleft"> 
     <img src="img/bulb.png" alt=""> 
     <h3>Title goes here</h3> 
     <p>onsectetur adipisicing elit, sedo eiusmod tempor incidi et dolorerserss eerhfre mag.</p> 
     </div> 
     <div class="ss_list floatleft"> 
     <img src="img/pen.png" alt=""> 
     <h3>Title goes here</h3> 
     <p>onsectetur adipisicing elit, sedo eiusmod tempor incidi et dolorerserss eerhfre mag.</p> 
     </div> 
     <div class="ss_list floatleft"> 
     <img src="img/settings.png" alt=""> 
     <h3>Title goes here</h3> 
     <p>onsectetur adipisicing elit, sedo eiusmod tempor incidi et dolorerserss eerhfre mag.</p> 
     </div> 
     <div class="ss_list floatleft"> 
     <img src="img/desktop.png" alt=""> 
     <h3>Title goes here</h3> 
     <p>onsectetur adipisicing elit, sedo eiusmod tempor incidi et dolorerserss eerhfre mag.</p> 
     </div> 
    </div> 
    </div> 
</div> 

Там нет больше кода. В первый раз, когда я хочу просто поплыть влево, тогда это происходит.

Какая ошибка? Что мне теперь делать?

Answer 1

Посмотрите на верхнюю панель кода. floatright {float: left} < == Похоже, вы указали неправильный float с неправильным номером класс.

Answer 2

Это должно быть .floatleft{float: left;}

Answer 3

You have mistaken as .floatright to be change as .floatleft in your style 

.floatleft {float: left} 
 
.colum{width: 1170px; margin: 0 auto;} 
 
.fix {overflow: hidden}

<div class="services_area"> 
 
      <div class="colum"> 
 
       <div class="services"> 
 
        <div class="services_title fix"> 
 
         <h1>About Me</h1> 
 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <span>quis nostrud exercitation ullamco</span> laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor.</p> 
 
        </div> 
 
       </div> 
 
       <div class="services_list"> 
 
        <div class="ss_list floatleft"> 
 
         <img src="img/bulb.png" alt=""> 
 
         <h3>Title goes here</h3> 
 
         <p>onsectetur adipisicing elit, sedo eiusmod tempor incidi et dolorerserss eerhfre mag.</p> 
 
        </div> 
 
        <div class="ss_list floatleft"> 
 
         <img src="img/pen.png" alt=""> 
 
         <h3>Title goes here</h3> 
 
         <p>onsectetur adipisicing elit, sedo eiusmod tempor incidi et dolorerserss eerhfre mag.</p> 
 
        </div> 
 
        <div class="ss_list floatleft"> 
 
         <img src="img/settings.png" alt=""> 
 
         <h3>Title goes here</h3> 
 
         <p>onsectetur adipisicing elit, sedo eiusmod tempor incidi et dolorerserss eerhfre mag.</p> 
 
        </div> 
 
        <div class="ss_list floatleft"> 
 
         <img src="img/desktop.png" alt=""> 
 
         <h3>Title goes here</h3> 
 
         <p>onsectetur adipisicing elit, sedo eiusmod tempor incidi et dolorerserss eerhfre mag.</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>

Answer 4

Вы пишете имя неверный класс

.floatright {float: left;}

вы должны использовать

.floatleft {float: left;}

Answer 5

Спасибо всем. теперь работает хорошо. Отлично. Все вы великолепны. Мне нравится stackoverflow. как скоро ответ здесь !!!

.floatleft {float: left} 
 
.floatright {float: right} 
 
.colum{width: 1170px; margin: 0 auto;} 
 
.fix {overflow: hidden} 
 
.clear {clear: both}