我正在努力让div与图像和文本水平排列正确。没有文字。一切都按预期工作。但是，当我向文章添加文本时，一切都会中断。建议是值得欢迎和赞赏的。如果我对这篇文章的格式不合适，我很抱歉。这里比较新。
HTML：
<div id="icon-container">
<div id="icon"><img class="hover-icon1"
src="/Portals/0/Images/NewSite/comp.png?ver=2017-05-26-102442-467"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
<div id="icon"><img class="hover-icon2"
src="/Portals/0/Images/NewSite/phone.png?ver=2017-05-26-102445-013"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
<div id="icon"><img class="hover-icon3"
src="/Portals/0/Images/NewSite/email.png?ver=2017-05-26-102444-373"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
<div id="icon"><img class="hover-icon4"
src="/Portals/0/Images/NewSite/alert.png?ver=2017-05-26-102443-217"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
<div id="icon"><img class="hover-icon5"
src="/Portals/0/Images/NewSite/backup.png?ver=2017-05-26-102443-747"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
<div id="icon"><img class="hover-icon6"
src="/Portals/0/Images/NewSite/web.png?ver=2017-05-26-102445-577"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
</div>
CSS：
/* CSS For Icons */
#icon-container {
width:100%;
}
#icon {
width:16.66%;
height: 200px;
display:inline-block;
margin-right: -4px;
box-sizing: border-box;
padding: 1%;
text-align: center;
}
@media all and (max-width:800px)
{
#icon
{
display: table;
margin: 0 auto;
height: 100px;
text-align: center;
}
}
img.hover-icon1, img.hover-icon2, img.hover-icon3, img.hover-icon4,
img.hover-icon5, img.hover-icon6 {
margin:20px;
padding:3px;
float:left;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
background-color: #1356d1
}
img.hover-icon1:hover, img.hover-icon2:hover, img.hover-icon3:hover,
img.hover-icon4:hover, img.hover-icon5:hover, img.hover-icon6:hover {
cursor:pointer;
margin-top: 5px;
}
h4.icon-text {
clear: left;
display: block;
}
答案 0 :(得分：0)
只需将浮动左侧添加到#icon
/* CSS For Icons */
#icon-container {
width:100%;
}
#icon {
width:16.66%;
height: 200px;
display:inline-block;
margin-right: -4px;
box-sizing: border-box;
padding: 1%;
text-align: center;
float: left;
}
@media all and (max-width:800px)
{
#icon
{
display: table;
margin: 0 auto;
height: 100px;
text-align: center;
}
}
img.hover-icon1, img.hover-icon2, img.hover-icon3, img.hover-icon4,
img.hover-icon5, img.hover-icon6 {
margin:20px;
padding:3px;
float:left;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
background-color: #1356d1
}
img.hover-icon1:hover, img.hover-icon2:hover, img.hover-icon3:hover,
img.hover-icon4:hover, img.hover-icon5:hover, img.hover-icon6:hover {
cursor:pointer;
margin-top: 5px;
}
h4.icon-text {
clear: left;
display: block;
} <div id="icon-container">
<div id="icon"><img class="hover-icon1"
src="/Portals/0/Images/NewSite/comp.png?ver=2017-05-26-102442-467"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
<div id="icon"><img class="hover-icon2"
src="/Portals/0/Images/NewSite/phone.png?ver=2017-05-26-102445-013"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
<div id="icon"><img class="hover-icon3"
src="/Portals/0/Images/NewSite/email.png?ver=2017-05-26-102444-373"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
<div id="icon"><img class="hover-icon4"
src="/Portals/0/Images/NewSite/alert.png?ver=2017-05-26-102443-217"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
<div id="icon"><img class="hover-icon5"
src="/Portals/0/Images/NewSite/backup.png?ver=2017-05-26-102443-747"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
<div id="icon"><img class="hover-icon6"
src="/Portals/0/Images/NewSite/web.png?ver=2017-05-26-102445-577"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
</div>