HTML element 정렬 (우측정렬,좌측정렬) float사용

아이콘 클릭후 검색화면을 만들고 있는데...

 

리셋버튼과 검색버튼을 우측으로 정렬하고 싶었는데 마땅치 않았다.

 

<Col>    
<div className="iconbox">
        <R1 ramen1={ramen1}></R1>
        <R2 ramen2={ramen2}></R2>
        <R3 ramen3={ramen3}></R3>
        {/* 순서가 왜바뀌는지는 모르지만 서치랑,리셋버튼바뀜 */}
        <div className="icon" ><img src="search.png" width={45}></img></div>
        <div className="icon" onClick={()=>{setRamen1(0);setRamen2(0);setRamen3(0)
        }}><img src="reset.png" width={45}></img></div>
      </div>
      

</Col>

Bootstrap Grid로 나눈 부분중 한 파트인데

 

이 사진과 관련된 코드!

 

보면 className을 icon으로주고

 

        .icon{
          float:right;
          cursor: pointer;

        }
        .icon:active{
          transform: translateY(2px);
        }

이와같이 float속성에 right로 줘서 해결했다.

다만 반응형으로 모바일 화면에선 이런식으로 바뀌어지길래

<Col xs={8} md={4}>

이와같이 주어서 해결했다.

 

정상적으로 잘 작동하는 부분! 일단 float으로 사용해서 문제는 없다.

 

결론, 나는 div안에서 다른 속성을 우측 정렬하고 싶을때 float:right;로 해결했다.

 

 

- 참고한사이트

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

justify-content - CSS: Cascading Style Sheets | MDN

https://aboooks.tistory.com/101

[html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬)

https://www.daleseo.com/css-align-right/

[CSS] 엘리먼트 우측 정렬 (Flexbox/Grid)