В настоящее время я создаю веб-страницу макета сетки div. Очевидно, я редактировал каждый отдельный квадрат, чтобы заполнить роль. Однако по какой-то причине я заметил, что, хотя я определил большую часть 200x200px
как 200x200px
а пара - 200x400px
по некоторым причинам некоторые из них 200x400px
размер на 10px
поэтому квадраты начинают перекрываться. Раньше у меня этой проблемы не возникало. Может кто-нибудь, пожалуйста, устранить это? Как я не вижу проблемы.
Проблема заключается в "шагах" шагов и div "специальных предложений", где фон также уменьшился до половины размера. Вот оживленная страница, о которой идет речь, посмотрите исходный код. Я удалю это, когда на вопрос ответят будущие потомки сообщения.
Вот HTML:
<div class="col">
<div class="trigger">
<div style="display:table-cell; vertical-align:middle; color: white;" tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" height="200" width="200"/><p style="margin: 10px 20px;">Fill out our order form choosing the service you require and your payment details. We will then take a deposit and book you into our diary.<p></div>
</div>
<div class="trigger">
<div style="display:table-cell; vertical-align:middle; color: white;" tabindex="0" class="maincontent hover-img img4"><img src="STEP3.jpg" height="200" width="200"/><p style="margin: 10px 20px;">We will produce the work you require using the project plan. All of our work is produced Within the time limit set and to the highest possible standard.<p></div>
</div>
</div>
<div class="col">
<div class="trigger">
<div style="display:table-cell; vertical-align:middle; color: white;" tabindex="0" class="maincontent hover-img img4"><img src="STEP2.jpg" height="200" width="200"/><p style="margin: 10px 20px;">We will have a face to face meeting to discuss everything that you require and we will put together a project plan.<p></div>
</div>
<div class="trigger">
<div style="display:table-cell; vertical-align:middle; color: white;" tabindex="0" class="maincontent hover-img img4"><img src="STEP4.jpg" height="200" width="200"/><p style="margin: 10px 20px;">A design is not finished until you are entirely happy. When we believe the work is complete we will send you an artwork approval form for you to sign and return.<p></div>
</div>
</div>
применить этот css
.trigger {
width: 200px;
height: 200px;
overflow: hidden;
box-sizing: border-box;
}
Если вы используете дополнение для .trigger, добавьте размер окна: box-border; собственность ему.
Для получения более подробной справки отправьте свой css и исправьте прямую ссылку, поскольку она приносит в локальный файл, который у вас есть!