Блог

Я пытаюсь узнать об адаптивном веб-дизайне.

Я создал три контейнера div бок о бок с процентной шириной и процентным запасом. Каждый раз, когда я запускаю код, в последнем контейнере остается немного пробелов.

Возможно ли это исправить?

 <div class="wrapper clearfix">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>
  

Вот ссылка на JSFiddle.

У меня такая же проблема, когда у меня есть 4 контейнера с 25% без полей. Каждый раз, когда я изменяю размер браузера, в правом контейнере остается немного пробелов. Заметил, что проблема только в Safari. Что я должен сделать, чтобы решить эту проблему?

Если вы используете «.66» для деления значений ровно на 100%, это не даст правильных результатов. Попробуйте использовать 0,5% или 1%. Я просто обновляю ваш CSS, как показано ниже, и он работает нормально.

  .one
 {
width: 32.5%;
height: 200px;
background: #ECF0F1;
margin-right: 0.5%;
float: left;
 }
.two
 {
width: 33%;
height: 200px;
background: #ECF0F1;
margin-left: 0.5%;
margin-right: 0.5%;
float: left;
 }
 .three
 {
width: 32.5%;
height: 200px;
background: #ECF0F1;
margin-left: 0.5%;
float: left;
 }