Question

我需要有关“模块5-18”上的图像浮动的帮助。Angela的网络开发课程的CSS浮动和清除。我试图使技能图像浮动，使第二种技能的图像不知所措。

我在做什么错了？

我尝试将两个“技能”图像分组在一个round类中，并使用：

.round-skill {
  float: left;
}

但是只有最上面的技能形象可以按计划进行。下面的技能图片及其下的其他元素（如页脚）不正确

.skill-row {
  width: 50%;
  margin: 100px auto 100px auto;
  text-align: left;
}

.skill-row-sub {
  text-align: left;
  line-height: 2;
}

.skill-row-tab-title {
  text-align: left;
}

.round-skill-1 {
  float: left;
}

<div class="skills">
  <h2>My Skills.</h2>
  <div class="skill-row">
    <img class="round-skill-1" src="images/avatar.png" alt="">
    <h3 class="skill-row-tab-title">Frontend Development</h3>
    <p class="skill-row-sub">I develop website interface designs using frontend technologies such as HTML and CSS. Still learning Javascript and its frameworks.</p>
  </div>
  <div class="skill-row">
    <img class="round" src="images/avatar.png" alt="">
    <h3>UI/UX</h3>
    <p>I design interfaces using Sketch and Adobe XD</p>
  </div>
</div>

如何使两个技能图像浮动：在不弄乱布局的情况下向左移动？

Answer 1

使用“ cls”类（通常使用）制作一个div或一些标签，并给它CSS： .cls {clear：both};

将元素放在此类之后：

<p class="skill-row-sub">I develop website interface designs using frontend technologies such as HTML and CSS. Still learning Javascript and its frameworks.</p>

应该没关系。

清除：两者都会将一个浮动对象与另一个浮动对象分开

像这样：

    `<div class="skills">
    <h2>My Skills.</h2>
     <div class="skill-row">
         <img class="round-skill-1" src="images/tree-3097419__340.jpg" alt="">
         <h3 class="skill-row-tab-title">Frontend Development</h3>
         <p class="skill-row-sub">I develop website interface designs using frontend technologies such as HTML and CSS. Still learning Javascript and its frameworks.</p>
         <div class="cls"></div>
     </div>
     <div class="skill-row">
         <img class="round" src="images/tree-3097419__340.jpg" alt="">
         <h3>UI/UX</h3>
         <p>I design interfaces using Sketch and Adobe XD</p>

     </div>
 </div>`

css：

`.cls {clear: both};`

图片浮动问题

1 个答案: