반응 형 포지셔닝 아이콘

Question

나는 반응 형 웹 사이트를 구축하고 있습니다. 이제는 서로 옆에 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

Answer 1

이미지와 텍스트의 폭을 포함 할 컨테이너의 폭을 포함하는, 이미지 대신 상기 .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>

Answer 2

마이클 권리입니다. 또 다른 옵션은 수직 정렬을 조정하는 것입니다.

.icon1, .icon2, .icon3 { 
    padding: 0px 150px 0px 150px; 
    margin-top: 180px; 
    display: inline-block; 
    vertical-align: top; <- this here 
}