Ответственные ширины

Question

Я пытаюсь получить три div, чтобы занимать третью ширину (33%), но когда я изменяю размер окна, они прыгают по всему месту и не выстраиваются правильно. Что я делаю не так?

HTML

<div class="step"> 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
</div> 
<div class="step"> 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
</div> 
<div class="step"> 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
    <p>Look out for links and prompts in our emails and newsletters</p> 
</div> 

CSS

.step{ 
    width:33%; 
    height:200px; 
    display:inline-block; 
} 
.fa{ 
    color:darkgray; 
    width:100%; 
    margin-top:5%; 
} 
i{ 
    text-align:center; 
} 
.step p{ 
    padding:5%; 
    text-align:center; 
} 

Answer 1

Проблема заключается в том, что пробелы между элементами DIV также занимает место (потому что они display:inline-block).

Решение 1: Удалить пробельные

Использовать HTML комментарии удалить пробел (добавить vertical-align:top, чтобы держать их сверху выровнены, когда они имеют разные высоты)

.step{ 
 
    width:33%; 
 
    height:200px; 
 
    display:inline-block; 
 
    vertical-align:top; 
 
} 
 
.fa{ 
 
    color:darkgray; 
 
    width:100%; 
 
    margin-top:5%; 
 
} 
 
i{ 
 
    text-align:center; 
 
} 
 
.step p{ 
 
    padding:5%; 
 
    text-align:center; 
 
}

<div class="step"> 
 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
 
</div><!-- 
 
--><div class="step"> 
 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
 
</div><!-- 
 
--><div class="step"> 
 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
 
    <p>Look out for links and prompts in our emails and newsletters</p> 
 
</div>

---

Решение 2: Использование float:left

.step{ 
 
    width:33%; 
 
    height:200px; 
 
    float:left; 
 
} 
 
.fa{ 
 
    color:darkgray; 
 
    width:100%; 
 
    margin-top:5%; 
 
} 
 
i{ 
 
    text-align:center; 
 
} 
 
.step p{ 
 
    padding:5%; 
 
    text-align:center; 
 
}

<div class="step"> 
 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
 
</div> 
 
<div class="step"> 
 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
 
</div> 
 
<div class="step"> 
 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
 
    <p>Look out for links and prompts in our emails and newsletters</p> 
 
</div>

---

Решение 3: использование flexbox (самые современные и более подходящим в настоящее время)

Для этого необходим оберточный элемент.

.steps{display:flex} 
 
.step { 
 
    height: 200px; 
 
    flex: 0 0 1; 
 
} 
 
.fa { 
 
    color: darkgray; 
 
    width: 100%; 
 
    margin-top: 5%; 
 
} 
 
i { 
 
    text-align: center; 
 
} 
 
.step p { 
 
    padding: 5%; 
 
    text-align: center; 
 
}

<div class="steps"> 
 
    <div class="step"> 
 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
 
    </div> 
 
    <div class="step"> 
 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
 
    </div> 
 
    <div class="step"> 
 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
 
    <p>Look out for links and prompts in our emails and newsletters</p> 
 
    </div> 
 
</div>

Answer 2

Это побочный эффект от использования display: inline-block; вместо float.

При использовании inline-block, ваш браузер будет рассматривать любые разрывы строк в коде как пространства, так что на самом деле делает в вашем случае:

div (space) div (space) div 

Удаляя разрывы строк в коде между вашей дивой , вы можете решить эту проблему. Или вы можете использовать float: left; и элемент очистки после этого.

Удаление разрывы строки:https://jsfiddle.net/qzdxtwhx/

<div class="step"> 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
</div><div class="step"> 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
</div><div class="step"> 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
    <p>Look out for links and prompts in our emails and newsletters</p> 
</div> 

Использование поплавка:https://jsfiddle.net/qzdxtwhx/1/

<div class="step"> 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
</div> 
<div class="step"> 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
</div> 
<div class="step"> 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
    <p>Look out for links and prompts in our emails and newsletters</p> 
</div> 
<div class="clear"></div> 

.step{ 
    width:33%; 
    height:200px; 
    float: left; /*Replace display: inline-block; */ 
} 

.clear { /*Add a 'clear' element to preserve natural layout*/ 
    clear: both; 
} 

Answer 3

Вы должны использовать поплавок: слева; и удалить дисплей: встроенный блок; Замените ваш .step css следующим образом:

.step {ширина: 33%; высота: 200px; float: left;}

свойство float очень часто используется. Хотя, на мой взгляд, это немного неинтуитивно для начинающих.

Answer 4

Оберните их в родительский div и установите размер шрифта div равным 0, это избавит вас от разрывов строк, которые разбивают шаги на отдельные строки. Вы можете использовать float, как говорит Санти, но я действительно предпочитаю работать с встроенным блоком лично, я считаю его более пуленепробиваемым, поплавки должны быть очищены и не могут быть выровнены по вертикали.

<div class="parent"> 
    <div class="step"> 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
    </div> 
    <div class="step"> 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
    </div> 
    <div class="step"> 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
    <p>Look out for links and prompts in our emails and newsletters</p> 
    </div> 
</div> 

CSS:

.parent{ 
    font-size: 0; 
}