아주 간단한 오류이지만 해결할 수 없습니다. 다음 링크를 확인하십시오. 당신은 "창업"지역 찾을 슬라이더에서이미지 아래에 텍스트 줄 바꿈
http://inimitablesystems.com/demos/interactin/interactin
. 이미지 아이콘과 텍스트 설명이 있습니다. 텍스트가 이미지 아래에 나타나지 않고 이미지 아래에 정렬되는 것처럼 보이기를 원합니다. 나는 패딩도 시도했지만 올바른 노드에 적용 할 수 없다.
문제를 해결하는 방법을 알려주십시오.
대단히 감사합니다. 아마드
건축가 div의 아키텍처를 이렇게 만드십시오.
일부 고정 된 폭을 갖는 메인 establishment div. 그런 다음 establishment div을 두 개의 섹션 "left-establishment"과 "right-establishment" 너비 : 60 %로 나누십시오. 이 접근 방식으로 문제가 해결되기를 바랍니다.
주 사업장 div를 닫기 전에 두 div를 모두 떠 다니고 지워야합니다. – Sami
코드 기반이 이미 style 속성을 사용하고 있으므로 (사용하지 않는 것이 좋습니다!) 코드 샘플을 사용하여 코드를 제공하겠습니다. 설정되는 더 지저분한 width 값, 컨테이너 요소 폭 변경 사항에 대한 걱정, 텍스트 추가 또는 뺄셈에 대한 걱정이 없기 때문에 사미의 접근 @
는 가장 바람직한 솔루션입니다.
그러나 코드를 재구성하지 않고도 빠른 수정을 원한다면 @ Sami의 접근 방식을 권장하지만 몇 가지를 얻을 수 있습니다. @Sami가 응답을 게시하기 전에 이미 타이핑하는 문제를 겪었 기 때문에 실제로이 글을 게시하고 있습니다.
가능한 해결책 중 하나는 텍스트가 포함 된 요소의 너비를 명시 적으로 지정하고 이미 떠 다니는 이미지 옆에 배치하는 것입니다.
여기에서 문제가되는 것은 폭을 명시 적으로 지정하는 것이 다소 지저분하고 유지하기 어렵다는 것입니다 (인라인 스타일을 사용하면 이미 유지하기가 어렵습니다). 잠재적 인 문제가 더 많이 생깁니다.
<p style="text-align: left; width: 375px;">
<em style="font-style:normal; display:block; width:273px; float:left;">INTERACTin was established 2 years ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of 40-50 staff. Offers 3 occupation types.<br> Operates across various Industries.</em>
</p>
또 다른 가능한 해결책은 상자에 텍스트를 충당하기 위해 아래로 충분히 확장하기 위해 이미지 아래에 패딩을 추가하는 것입니다.
포함 된 요소의 너비가 변경되거나 더 많은 텍스트가 추가되면이 접근 방식은 실패하게됩니다. 다시 말하지만, 이것은 유지하기가 어렵습니다.
(코드 샘플에 !important을 사용해야했습니다. 웹 사이트가 이미 !important을 사용하고 있기 때문에, 일반적으로 follow rules of specificity 인 경우 대부분 필요하지 않습니다.)
<img src="http://inimitablesystems.com/demos/interactin/assets/assets/img/events-icon.png" class="pull-left" style="padding-bottom:60px!important;">
당신 문제에 적용되는 HTML과 CSS를 게시하시기 바랍니다. 또는 JSFiddle에서 다시 작성하십시오. – LinkinTED