我有一个网页，当浏览器窗口缩小时，除了底部窗口之外，所有模块都可以完美地调整大小。代码几乎相同，但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 :(得分：1)
在您的示例中，每列的宽度为18％。尝试为例如每列设置最小宽度。 150px，当浏览器窗口太小时，列将下降到下一行。
<div style="display: inline-block; vertical-align: top; width:18%; min-width:150px;">...</div>