отображение некоторых элементов в строке

Question

Я работаю над своим личным сайтом, но у меня здесь небольшая проблема. Я пытаюсь создать 4 умения, которые должны отображаться inline, но все, что я попробую, просто не произойдет. Я попытался применить float:left, но это может привести к тому, что идентификатор skills не будет иметь общего содержимого CSS, которое я считаю очень странным. Вот код:

<div id="skills"> 
    <div id="skill"> <img src="images/html.png" style="width:125px;height:125px;display:inline-block;"> 
    <p>Test1</p> 
    </div> 
    <div id="skill"> <img src="images/html.png" style="width:125px;height:125px;display:inline-block;"> 
    <p>Test2</p> 
    </div> 
    <div id="skill"> <img src="images/html.png" style="width:125px;height:125px;display:inline-block;"> 
    <p>Test3</p> 
    </div> 
    <div id="skill"> <img src="images/html.png" style="width:125px;height:125px;display:inline-block;"> 
    <p>Test4</p> 
    </div> 
</div> 

Как я могу позволить этим 4 «навыкам» отображаться рядом друг с другом?

Сердечные приветы

Answer 1

проблемы и Quick Fix

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

Пример:

<div id="skill" style="display:inline-block;"> 
    <img src="images/html.png" style="width:125px;height:125px;;"> 
    <p>Test1</p> 
</div> 

---

Предложения

1. Держите id атрибуты уникальны для страницы. Если вам нужны дубликаты, используйте вместо этого атрибут class.

2. Не использовать встроенные стили, добавьте их в файл CSS вместо этого и использовать соответствующее имя класса

Что-то вроде этого:

.skill { 
 
    display: inline-block; 
 
} 
 

 
.skill img { 
 
    width: 125px; 
 
    height: 125px; 
 
}

<div id="skills"> 
 
    <div class="skill"> 
 
    <img src="images/html.png"> 
 
    <p>Test1</p> 
 
    </div> 
 
    <div class="skill"> 
 
    <img src="images/html.png"> 
 
    <p>Test2</p> 
 
    </div> 
 
    <div class="skill"> 
 
    <img src="images/html.png"> 
 
    <p>Test3</p> 
 
    </div> 
 
    <div class="skill"> 
 
    <img src="images/html.png"> 
 
    <p>Test4</p> 
 
    </div>

Answer 2

Первый изменение ID до класс в id должен быть уникальным и есть 2 варианта, чтобы сделать это

1. поплавок: левое
2. дисплей: встроенный блок

Я предпочитаю второй, так что вам не нужно, чтобы очистить после того, как плавучий DIV

.skill{display:inline-block}

<div id="skills"> 
 
    <div class="skill"> 
 
    <img src="images/html.png" style="width:125px;height:125px;display:inline-block;"> 
 
    <p>Test1</p> 
 
    </div> 
 
    <div class="skill"> 
 
    <img src="images/html.png" style="width:125px;height:125px;display:inline-block;"> 
 
    <p>Test2</p> 
 
    </div> 
 
    <div class="skill"> 
 
    <img src="images/html.png" style="width:125px;height:125px;display:inline-block;"> 
 
    <p>Test3</p> 
 
    </div> 
 
    <div class="skill"> 
 
    <img src="images/html.png" style="width:125px;height:125px;display:inline-block;"> 
 
    <p>Test4</p> 
 
    </div>

Answer 3

Прежде всего, вы не должны использовать ID, чтобы вместо этого заменить их «классом». Это связано с тем, что идентификаторы уникальны. Другое дело, не определяйте стиль в каждом div, вместо этого создайте файл css и поместите его туда.

Чтобы решить вашу проблему, вам нужно установить отображение каждого «умения» div на встроенный блок. Вот Code Pen, чтобы вы могли видеть, что я сделал.

#skills { 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.skill { 
 
    height: 125px; 
 
    width: 125px; 
 
    display: inline-block; 
 
} 
 

 
.skill img { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<div id="skills"> 
 
    <div class="skill"> 
 
     <img src="images/html.png"> 
 
     <p>Test1</p> 
 
    </div> 
 
    <div class="skill"> 
 
     <img src="images/html.png"> 
 
     <p>Test2</p> 
 
    </div> 
 
    <div class="skill"> 
 
     <img src="images/html.png"> 
 
     <p>Test3</p> 
 
    </div> 
 
    <div class="skill"> 
 
     <img src="images/html.png" > 
 
     <p>Test4</p> 
 
    </div> 
 
</div>

Answer 4

• Прежде всего удалить тег ID = «умение», потому что он должен быть уникальным (Вы не можете использовать тот же идентификатор более чем один раз на одной странице).
• Удалить «дисплей: встроенный блок»; из стиля изображения и добавить родительский div каждого изображения. style = "float: left".

Answer 5

Попробуйте CSS для позиционирования элементов вашего рядный

#skills > div { 
    float: left; 
    } 

#skills img{ 
    display: inline-block; 
    height: 125px; 
    vertical-align: middle; 
    width: 125px; 
} 

#skills p { 
    display: inline-block; 
    vertical-align: middle; 
}