css 属性 float left 未按预期工作

Question

I'm a beginner in HTML and CSS. Here is my problem.

The Code:

.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>

There is no more code. First time I want to just float left, then that thing happened.

What is the error here? What should I do now?

Answer 1

Look at the top of your code. floatright {float: left} <== It looks like you set the wrong float on the wrong class .

Answer 2

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 3

它应该是.floatleft{float: left;}

Answer 4

You write a wrong class name

.floatright {float: left;}

you should use

.floatleft {float: left;}

Answer 5

Thanks everyone. now working good. This is great. All of you are great. I love the stackoverflow. how speedy reply here!!!

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