为什么我的花车不能正常工作？

时间：2016-02-26 05:20:11

标签： html css layout

浮子将会清除，物品会堆叠起来并向左浮动。我尝试清除图像和文章，但无济于事。

代码：

#Bottom_row {
    clear: both;
    height: 600px;
}
#Bottom_Column > img {
    clear: both;
    float: left;
}
.Article_Sec {
    float: left;
    clear: both;
    width: 25%;
}
<section id="Bottom_row">
    <img src="Images/pic_sure.png">
    <article class="Article_Sec">
        <div class="Content_area">
            <h3 class="category">Apps</h3>
            <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
        </div>
    </article>
    <article class="Article_Sec">
        <div class="Content_area">
            <h3 class="category">Apps</h3>
            <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
        </div>
    </article>
    <article class="Article_Sec">
        <div class="Content_area">
            <h3 class="category">Apps</h3>
            <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
        </div>
    </article>
    <article class="Article_Sec">
        <div class="Content_area">
            <h3 class="category">Apps</h3>
            <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
        </div>
    </article>
</section>

3 个答案:

答案 0 :(得分：0)

clear的CSS中的.Article_Sec导致了问题。请检查代码段 代码：

     #Bottom_row{
            clear:both;
            height:600px;
                
        }
        #Bottom_Column > img{
          clear:both;
            float:left;
         }
        .Article_Sec{
            float:left;
         
            width:25%;
            
        }
   <section id="Bottom_row">
                <img src="Images/pic_sure.png">
                <article class="Article_Sec">
    				<div class="Content_area">
                    <h3 class="category">Apps</h3>
                    <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
                    </div>
    			</article>
                <article class="Article_Sec">
    				<div class="Content_area">
                    <h3 class="category">Apps</h3>
                    <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
                    </div>
    			</article>
                <article class="Article_Sec">
    				<div class="Content_area">
                    <h3 class="category">Apps</h3>
                    <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
                    </div>
    			</article>
                <article class="Article_Sec">
    				<div class="Content_area">
                    <h3 class="category">Apps</h3>
                    <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
                    </div>
    			</article>
            </section>

答案 1 :(得分：0)

不要在浮动的div中写清楚。写给父div。 

#Bottom_row{
  clear:both;
  height:600px;
  
}

#Bottom_row > img{
  float:left;
}
       
.Article_Sec{
   float:left;
   width:25%;
}
<section id="Bottom_row">
                <img src="Images/pic_sure.png">
                <article class="Article_Sec">
    				<div class="Content_area">
                    <h3 class="category">Apps</h3>
                    <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
                    </div>
    			</article>
                <article class="Article_Sec">
    				<div class="Content_area">
                    <h3 class="category">Apps</h3>
                    <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
                    </div>
    			</article>
                <article class="Article_Sec">
    				<div class="Content_area">
                    <h3 class="category">Apps</h3>
                    <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
                    </div>
    			</article>
                <article class="Article_Sec">
    				<div class="Content_area">
                    <h3 class="category">Apps</h3>
                    <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
                    </div>
    			</article>
            </section>

修改

我误解了问题。然后制作图像width 100％或将图像放入另一个div并将width:100%提供给该div。

#Bottom_row{
  clear:both;
  height:600px;
}

#Bottom_row > img{
  float:left;
}

.imgDiv{
  width:100%
  }
       
.Article_Sec{
   float:left;
   width:25%;
}
<section id="Bottom_row">
                <div class="imgDiv">
                <img src="Images/pic_sure.png">
                  </div>
                <article class="Article_Sec">
    				<div class="Content_area">
                    <h3 class="category">Apps</h3>
                    <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
                    </div>
    			</article>
                <article class="Article_Sec">
    				<div class="Content_area">
                    <h3 class="category">Apps</h3>
                    <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
                    </div>
    			</article>
                <article class="Article_Sec">
    				<div class="Content_area">
                    <h3 class="category">Apps</h3>
                    <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
                    </div>
    			</article>
                <article class="Article_Sec">
    				<div class="Content_area">
                    <h3 class="category">Apps</h3>
                    <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
                    </div>
    			</article>
            </section>

答案 2 :(得分：0)

如果要清除图像浮动，只需在图像后添加
。 如果你想浮动文章删除清除.Article_Sec 

#Bottom_row{
        clear:both;
        height:600px;

    }
    #Bottom_Column > img{
      clear:both;
        float:left;
     }
    .Article_Sec{
        float:left;
        clear:both;
        width:25%;

    }
<section id="Bottom_row">
            <img src="Images/pic_sure.png"><br />
            <article class="Article_Sec">
                <div class="Content_area">
                <h3 class="category">Apps</h3>
                <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
                </div>
            </article>
            <article class="Article_Sec">
                <div class="Content_area">
                <h3 class="category">Apps</h3>
                <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
                </div>
            </article>
            <article class="Article_Sec">
                <div class="Content_area">
                <h3 class="category">Apps</h3>
                <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
                </div>
            </article>
            <article class="Article_Sec">
                <div class="Content_area">
                <h3 class="category">Apps</h3>
                <p class="latest">5 Tips to make your laptop run like the day you bought it!</p>
                </div>
            </article>
        </section>

相关问题
最新问题