1. 首頁
  2. 問答
  3. 爲什麼我的花車不能正常工作？

爲什麼我的花車不能正常工作？

2016-02-26 49 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％; } –

相關問題

 相關問題