Перекрытие разделов 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

Будем признательны за любую помощь в разрешении этого последнего раздела. Он должен быть адаптивным, чтобы быть удобным для мобильных устройств. Почему-то этого последнего модуля нет.

Заранее спасибо.


person Charles Wilkins IV    schedule 04.02.2016    source источник
comment
stackoverflow.com/questions/35095581/ обратитесь к этому   -  person pratikpawar    schedule 04.02.2016


Ответы (1)


В вашем примере каждый столбец имеет ширину 18%. Попробуйте установить минимальную ширину для каждого столбца, например. 150 пикселей, и столбцы переместятся на следующую строку, когда окно браузера станет слишком маленьким.

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