2016-02-04 27 views
-1

我有一個網頁,當瀏覽器窗口收縮時,所有模塊的調整大小完全正常,除了最下面的那個。代碼幾乎相同,但是divs重疊而不是放到新行。CSS div

頁代碼是:

<div itemprop='articleBody' class="container-fluid" style="background-image: url('/site3/images/what_it_does/Dollarphotoclub_93657809.jpg'); color: #ffffff;"> 
<h1 style="text-align: center; color: #ffffff;">Golf Simulation</h1> 
<hr style="border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF;" width="50%" /> 
<p style="text-align: center; color: #ffffff; font-size: 1.25em; margin-left: 45px; margin-right: 45px;">Play on one of the premium or primary courses, hit a bucket at the driving range or putting green, challenge friends or compete live with players around the world. The high-resolution 3D graphics are detailed in every angle and show your ball in real time. Explore the variety of Golf Simulation environments and opportunities the P3 offers:</p> 
<div id="table" style="display: inline-block; text-align:center;"> 

<div style="display: inline-block; vertical-align: top; width:18%;"> 
<img style="display: block; margin-left: auto; margin-right: auto; margin-top: 50px;" src="/site3/images/what_it_does/Golf-Courses.png" alt="" width="80" height="80" /> 
<p style="font-size: 1.75em; text-align: center; color: #ffffff; margin-top: 20px;">GOLF COURSES</p> 
<p style="text-align: center; color: #ffffff; margin-top: 10px; margin-left: 25px; margin-right: 25px;">Over 90 courses and tons of game play features for up to 8 players at a time.</p> 
</div> 

<div style="display: inline-block; vertical-align: top; width:18%;"> 
<img style="display: block; margin-left: auto; margin-right: auto; margin-top: 50px;" src="/site3/images/what_it_does/Driving-Range.png" alt="Driving_Range" width="80" height="80" /> 
<p style="font-size: 1.75em; text-align: center; color: #ffffff; margin-top: 20px;">DRIVING RANGES</p> 
<p style="text-align: center; color: #ffffff; margin-top: 10px; margin-left: 25px; margin-right: 25px;">Multiple ranges and ball trails with instant response for quick repetition work.</p>  
</div> 

<div style="display: inline-block; vertical-align: top; width:18%;"> 
<img style="display: block; margin-left: auto; margin-right: auto; margin-top: 50px;" src="/site3/images/what_it_does/Putting-Greens.png" alt="Putting_Greens" width="80" height="80" /> 
<p style="font-size: 1.75em; text-align: center; color: #ffffff; margin-top: 20px;">PUTTING GREENS</p> 
<p style="text-align: center; color: #ffffff; margin-top: 10px; margin-left: 25px; margin-right: 25px;">Multiple distances and slopes and ability to chip anywhere.</p> 
</div> 

<div style="display: inline-block; vertical-align: top; width:18%;"> 
<img style="display: block; margin-left: auto; margin-right: auto; margin-top: 50px;" src="/site3/images/what_it_does/Competitions.png" alt="Competitions" width="80" height="80" /> 
<p style="font-size: 1.75em; text-align: center; color: #ffffff; margin-top: 20px;">COMPETITIONS</p> 
<p style="text-align: center; color: #ffffff; margin-top: 10px; margin-left: 25px; margin-right: 25px;">Hours of fun tournaments or friendly play from longest drive, to closest to the pin.</p> 
</div> 

<div style="display: inline-block; vertical-align: top; width:18%;"> 
<img style="display: block; margin-left: auto; margin-right: auto; margin-top: 50px;" src="/site3/images/what_it_does/Online-Play.png" alt="Online_Play" width="80" height="80" /> 
<p style="font-size: 1.75em; text-align: center; color: #ffffff; margin-top: 20px;">ONLINE PLAY</p> 
<p style="text-align: center; color: #ffffff; margin-top: 10px; margin-left: 25px; margin-right: 25px;">Set up a private or public game, or play in daily competitions or online tournaments.</p> 
</div> 


</div> <!-- End Table --> 
</div> <!-- End Container fluid --> 

頁可以在http://www.p3proswing.com/site3/index.php/about/what-it-does

任何幫助被視爲以解決最後一節,將不勝感激。它需要能夠響應,因此它可以移動友好。由於某種原因,這最後一個模塊不是。

在此先感謝。

+0

http://stackoverflow.com/questions/35095581/content-within-container-in-footer-overlaps-when-reduced-to-mobile-screen#comment57913408_35095581請參閱本 – pratikpawar

回答

1

在您的示例中,每列都有18%的寬度。嘗試爲每個列設置一個最小寬度。 150px,當瀏覽器窗口太小時,這些列將下降到下一行。

<div style="display: inline-block; vertical-align: top; width:18%; min-width:150px;">...</div>