현재 버전

span div html css web

<span>태그... 정렬문제 정렬이 안됍니다 ㅠ




왜 위치가 들락날락한 걸까요.............


두 줄 이상 입력하면

div 박스의 위치가 뒤죽박죽이 됩니다 ㅠㅠ


 #footer {
            margin-top: 14.5%;
            background-image: url("C:/Users/김유진/Desktop/Artisan/image/building.jpg");
            background-size: cover;
            opacity: 0.9;
            height: 300px;
            top: -100px;
        }

        #footerIn {
            /* background-image: url("C:/Users/김유진/Desktop/Artisan/image/street.jpg"); */
            height: 300px;
            background-color: rgb(68, 42, 9);
            opacity: 0.9;
            text-align: center;
        }



<div id="footer">
            <div id="footerIn">
                <span class="fBox">
                    <p>Online Customer</p>
                    <p>Service</p>
                </span>
                <span class="fBox">
                    <p>The Artisan</p>
                    <p>더 아티산</p>
                </span>
                <span class="fBox">
                    <p>Info</p>
                    <p></p>
                </span>
                <span div class="fBox">
                    <p>Contact</p>
                    <p></p>
                </span>


            </div>
            
        </div>



수정 이력

2021-08-12 13:58:30 에 아래 내용에서 변경 됨 #1



왜 위치가 들락날락한 걸까요.............


두 줄 이상 입력하면

div 박스의 위치가 뒤죽박죽이 됩니다 ㅠㅠ


 #footer {
            margin-top: 14.5%;
            background-image: url("C:/Users/김유진/Desktop/Artisan/image/building.jpg");
            background-size: cover;
            opacity: 0.9;
            height: 300px;
            top: -100px;
        }

        #footerIn {
            /* background-image: url("C:/Users/김유진/Desktop/Artisan/image/street.jpg"); */
            height: 300px;
            background-color: rgb(68, 42, 9);
            opacity: 0.9;
            text-align: center;
        }



<div id="footer">
            <div id="footerIn">
                <span class="fBox">
                    <p>Online Customer</p>
                    <p>Service</p>
                </span>
                <span class="fBox">
                    <p>The Artisan</p>
                    <p>더 아티산</p>
                </span>
                <span class="fBox">
                    <p>Info</p>
                    <p></p>
                </span>
                <span div class="fBox">
                    <p>Contact</p>
                    <p></p>
                </span>


            </div>
            
        </div>