한 섹션에 이미지가 포함 된 3 개 div가 있습니다. 큰 화면에서 한 줄로 정렬됩니다. 하지만 작은 화면에서는 반응하지 않습니다. 나는 그들이 서로 아래에 있도록 반응이 필요합니다 미리 감사드립니다
<section id="about">
<h1>undrawa illustration</h1>
<div class="about-container">
<div class="image-container">
<h2>web innovation</h2>
<img src="img/undraw_feeling_proud_light.svg" alt="" id="image1">
</div>
<div class="image-container">
<h2>web innovation</h2>
<img src="img/undraw_conceptual_idea_light.svg" alt="" id="image2">
</div>
<div class="image-container">
<h2>web innovation</h2>
<img src="img/undraw_proud_coder_light.svg" alt="" id="image3">
</div>
</div>
</section>
CSS를 포함하지 않았지만 다음과 같은 것이 있다고 가정합니다.
.about-container{
display: block;
}
.image-container{
display: inline-block;
}
모바일 디스플레이에 대해 별도의 규칙을 작성해야합니다. 시험:
<style type="text/css">
/* Mobile CSS */
@media only screen and (max-width: 768px) {
.about-container{
display: block;
}
.image-container{
width: 100%;
}
}
그리고 HTML :
<div class="about-container">
<div class="image-container">
1
</div>
<div class="image-container">
2
</div>
<div class="image-container">
3
</div>
</div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다