1. 首页
  2. 问答
  3. 为什么我的花车不能正常工作？

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

2016-02-26 45 views
1

浮游物将清除，物品刚刚堆积并向左浮动。我试图清除图像和文章，但无济于事。为什么我的花车不能正常工作？

代码：

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

来源

2016-02-26 Chris

回答

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"> 
 
    \t \t \t \t <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> 
 
    \t \t \t </article> 
 
       <article class="Article_Sec"> 
 
    \t \t \t \t <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> 
 
    \t \t \t </article> 
 
       <article class="Article_Sec"> 
 
    \t \t \t \t <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> 
 
    \t \t \t </article> 
 
       <article class="Article_Sec"> 
 
    \t \t \t \t <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> 
 
    \t \t \t </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"> 
 
    \t \t \t \t <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> 
 
    \t \t \t </article> 
 
       <article class="Article_Sec"> 
 
    \t \t \t \t <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> 
 
    \t \t \t </article> 
 
       <article class="Article_Sec"> 
 
    \t \t \t \t <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> 
 
    \t \t \t </article> 
 
       <article class="Article_Sec"> 
 
    \t \t \t \t <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> 
 
    \t \t \t </article> 
 
      </section>

来源

2016-02-26 05:30:00 ketan

+0

感谢这个实际工作，除了文章被推到图片的旁边，并且没有破坏图片 – Chris

+0

@Chris检查我的编辑。 – ketan

+0

它仍然无法正常工作，所有的文章最终与图像内联。我想要图像下的文章 – Chris

0

您在.Article_Sec是造成issue.Check片断 代码的CSS clear：

 #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"> 
 
    \t \t \t \t <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> 
 
    \t \t \t </article> 
 
       <article class="Article_Sec"> 
 
    \t \t \t \t <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> 
 
    \t \t \t </article> 
 
       <article class="Article_Sec"> 
 
    \t \t \t \t <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> 
 
    \t \t \t </article> 
 
       <article class="Article_Sec"> 
 
    \t \t \t \t <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> 
 
    \t \t \t </article> 
 
      </section>

来源

2016-02-26 05:24:24

+0

由于它实际上是内联，但现在的物品正推图片旁边 – Chris

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>

来源

2016-02-26 05:31:23

+0

谢谢，但文章显示一个接一个与此更改我想他们内联 – Chris

+0

如果你想漂浮的文章删除从.Article_Sec清除。 只删除.Article_Sec .Article_Sec { float：left; 宽度：25％; } –

相关问题

 相关问题