답변 2개
채택된 답변
+20 포인트
2년 전
음.... 만약에 한줄씩 나오는 부모 태그가 있다고 가정을 한다면
예를 들어서요.
</p>
<p>HTML</p>
<p><div class="container">
<img src="image.jpg" alt="Your Image">
<div class="text">
<p>Your text here</p>
</div>
</div></p>
<p>//---</p>
<p>CSS</p>
<p>.container {
display: flex;
align-items: center;
}</p>
<p>img {
flex-shrink: 0;
width: 50%;
max-width: 200px; /* 혹은 또 다른 원하는 임의값으로*/
margin-right: 1rem;
}</p>
<p>.text {
flex-grow: 1;
}
</p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 5개
�
하늘뚱
2년 전
�
김준수사랑
2년 전
이미지의 정렬이 부트스트랩 그리드로 되어있는데..
이방식으로 처리할수는 없는건가요??
class="row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-2
이방식으로 처리할수는 없는건가요??
class="row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-2
�
하늘뚱
2년 전
상관없습니다.
�
하늘뚱
2년 전
그럼 이렇게 수정해 보세요.
[code]
<div class="container">
<div class="row row-cols-1 row-cols-md-2">
<div class="col-md-6">
<img src="image.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-6">
<p>원하시는 택스트</p>
</div>
</div>
</div>
[/code]
[code]
<div class="container">
<div class="row row-cols-1 row-cols-md-2">
<div class="col-md-6">
<img src="image.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-6">
<p>원하시는 택스트</p>
</div>
</div>
</div>
[/code]
�
김준수사랑
2년 전
스킨 얻어쓰는 신세라서 보내주신걸 적용을 못하고 있습니다..ㅜㅜㅜ
제가 다운받은스킨이 https://sir.kr/g5_skin/54431 인데요...
스킨한번 보시고 도움좀 부탁드려도 될까요;;;
제가 다운받은스킨이 https://sir.kr/g5_skin/54431 인데요...
스킨한번 보시고 도움좀 부탁드려도 될까요;;;
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 2개
�
김준수사랑
2년 전
넹;;ㅜㅜ 몇시간째 이것만 계쏙보고 있습니다..ㅜㅜ
�
하늘뚱
2년 전
나리야는 저 기억으로 함수부분을 수정을 하셔야 하고
질문에 브라우즈 창을 최소 모바일 사이즈까지 줄인다고
가정을 하면 미디어쿼리 부분을 수정해서 해야 정상적을 겁니다.
크롬으로 개발자 도구 F12로 여시고 줄이는 부분을 찍어 보시는 것도 방법인데요.
질문에 브라우즈 창을 최소 모바일 사이즈까지 줄인다고
가정을 하면 미디어쿼리 부분을 수정해서 해야 정상적을 겁니다.
크롬으로 개발자 도구 F12로 여시고 줄이는 부분을 찍어 보시는 것도 방법인데요.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
width: 50% 및 max-width: 200px 속성은 각각 이미지의 초기 너비와 최대 너비를 지정. 필요에 맞게 이 값을 조정.
.text 요소의 flex-grow: 1 속성을 사용하면 텍스트가 컨테이너의 나머지 공간을 채울 수 있습니다. 이렇게 하면 컨테이너 크기가 조정되더라도 텍스트가 이미지 오른쪽에 유지됩니다.