向左浮动不起作用

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}＆lt; ==看起来您在错误的类上设置了错误的float。

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

你写错了类名

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