Блог

Я новичок в CSS. Я только что запустил свой первый веб-сайт и почти закончил с целевой страницей. Тем не менее, есть две проблемы, которые меня поразили, и я до сих пор не понял, в чем основная причина. Я создал ссылку на plukr http://plnkr.co/edit/aH8LfC?p=preview.

1. Появляется горизонтальная полоса прокрутки, и с левой стороны есть пробел, хотя ширина установлена на 100%.
2. Третье поле под баннером выше двух других, даже если все они имеют одинаковые CSS классы.

Код для трех полей div:

     <div class="container info-box clearfix">
        <div class="col3">
          <h3>Investment Planning</h3>
          <p>Money Plant Services is one of the premier Investment advisory Firm known for making taxation amp; investing simpler and more understandable and profitable for the clients. Currently serving more than 5000 Individual customers with corporate tie ups.</p>
        </div>
        <div class="col3">
            <h3>Wealth Management</h3>
            <p>Money Plant Services is one of the premier Investment advisory Firm known for making taxation amp; investing simpler and more understandable and profitable for the clients. Currently serving more than 5000 Individual customers with corporate tie ups.</p>
        </div>
        <div class="col3">
            <h3>Risk Management</h3>
            <p>Money Plant Services is one of the premier Investment advisory Firm known for making taxation amp; investing simpler and more understandable and profitable for the clients. Currently serving more than 5000 Individual customers with corporate tie ups.
            </p>
        </div>
    </div>
  

CSS:

  .info-box{
   width:100%;
   margin-top: 20px;
 }

.col3{
  width: 30%;
  float: left;
  margin: 10px;
  padding: 5px 10px;
  background-color: #FCFCFC;
  border-radius: 2px;
  box-shadow: 0 0 4px #DDDDDD;
}
  

Кто-нибудь может помочь мне понять, где я ошибаюсь. Я не использую фреймворки Bootstrap / Foundation, потому что мне нужно освоиться с чистым CSS.

Примечание: веб-страница должна быть загружена в полном окне, чтобы увидеть проблему.

С уважением, Прадип

Это переполнение вызвано вашими левыми / правыми отступами, которые не включены в ширину, если вы не добавите этот CSS :

 * {
    box-sizing: border-box;
}
  

Обновлен Plunker

Это означает, что (с 100px шириной) размер вашего элемента будет 100px от левой границы до правой. Если вы установите 15px отступ, у вас будет :

• Отступ слева: 15 пикселей
• Правое заполнение: 15 пикселей
• Содержание: (100 — 2 * 15 ) = 70 пикселей
• Итого: (70 2 * 15 ) = 100 пикселей

Если вы сохраните значение по умолчанию для box-sizing , у вас будет :

• Отступ слева: 15 пикселей
• Правое заполнение: 15 пикселей
• Содержимое: 100 пикселей
• Итого: (100 2 * 15 ) = 130px

Полоса прокрутки вызвана заполнением контейнера и нижнего колонтитула. Заполнение выталкивает содержимое с холста. CSS для блоков не имеет определенной высоты, поэтому высота зависит от объема содержимого внутри.

Я думаю, вам нужно что-то между контейнером и столбцами, чтобы компенсировать заполнение (обычно для этого используется отрицательное поле).

Дополнительная высота в вашем последнем поле связана с тем, что вы установили:

 white-space: pre-wrap;
  

pre-wrap Свойство указано как:

Последовательности пробелов сохранены. Строки прерываются символами новой строки, <br> и по мере необходимости для заполнения полей строк.

В вашем HTML только в последнем поле есть новая строка:

 <p>Money Plant Services ...
</p>
  

Таким образом, новая строка и пробелы сохраняются из-за white-space: pre-wrap , что делает этот <p> элемент более высоким, чтобы соответствовать тексту, а также новой строке и пробелу в конце.