响应式定位图标
问题描述:
我正在建立一个响应式网站,现在有3个图标彼此相邻放置。我希望他们在最大的断点处彼此相邻,但是当我添加文本时他们不会这样做。响应式定位图标
#diensten {
text-align: center;
height: 700px;
background-color: #FFF;
position: relative;
}
#diensten h3 {
font-family: "helvetica";
font-size: 30px;
color: #0000;
padding-top: 20px;
}
#diensten p {
padding-top: 30px;
}
#icons {
margin: auto;
display: block;
text-align: center;
font-family: "Helvetica";
}
#icons h3 {
margin: auto;
display: block;
text-align: center;
font-size: 24px;
}
.icon1,
.icon2,
.icon3 {
padding: 0px 150px 0px 150px;
margin-top: 180px;
display: inline-block;
}
.icon1 img,
.icon2 img,
.icon3 img {
width: 200px;
}
/* Desktop */
@media (max-width: 1820px) {
.icon1,
.icon2,
.icon3 {
padding: 0px, 100px, 0px, 100px;
}
}
/* iPads (portrait and landscape) */
@media (min-width: 768px) and (max-width: 1024px) {}
<div id="icons">
<div class="icon1">
<img src="Images/browser.svg">
<h3>.Net WebApps</h3>
<p>Met een .Net webapp <br>kunt u via het internet <br>eenvoudig uw data aanpassen <br>en opslaan in een database. <br>de informatie i <br>computerprogramma's wordt <br>voornamelijk binnen organisaties gebruikt.</p>
</div>
<div class="icon2"><img src="Images/database.svg"></div>
<div class="icon3"><img src="Images/stopwatch.svg"></div>
这是如何工作的时候我建立它响应? 我是否必须更改填充或其他内容? This is what it does I want them next to each other, and on smaller devices under each other
答
的.icon
容器上设置width
,而不是图像,以包含容器,其中将包含图像和文字的宽度的宽度。然后这些图标将并排显示。
#diensten {
text-align: center;
height: 700px;
background-color: #FFF;
position: relative;
}
#diensten h3 {
font-family: "helvetica";
font-size: 30px;
color: #0000;
padding-top: 20px;
}
#diensten p {
padding-top: 30px;
}
#icons {
margin: auto;
display: block;
text-align: center;
font-family: "Helvetica";
}
#icons h3 {
margin: auto;
display: block;
text-align: center;
font-size: 24px;
}
.icon {
display: inline-block;
vertical-align: top;
max-width: 200px;
}
.icon img {
display: block;
max-width: 100%;
}
<div id="icons">
<div class="icon1 icon">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200">
<h3>.Net WebApps</h3>
<p>Met een .Net webapp <br>kunt u via het internet <br>eenvoudig uw data aanpassen <br>en opslaan in een database. <br>de informatie i <br>computerprogramma's wordt <br>voornamelijk binnen organisaties gebruikt.</p>
</div>
<div class="icon2 icon"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200"></div>
<div class="icon3 icon"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200"></div>
</div>
答
迈克尔是对的。另一种选择是简单地调整垂直对齐。
.icon1, .icon2, .icon3 {
padding: 0px 150px 0px 150px;
margin-top: 180px;
display: inline-block;
vertical-align: top; <- this here
}