하나의 행이있는 하나의 열과 HTML / CSS에 중첩 된 두 개의 행이있는 하나의 열을 얻는 방법

렉스 레 멘스

오른쪽에있는 두 줄의 텍스트에 맞춰 왼쪽 세로에 아이콘을 표시하는 가장 쉬운 방법을 찾고 있습니다.

내가 고민하고있는 것은 HTML을 구성하는 방식입니다. 나는 이것을 기능적으로 만들 수 있지만, 내가 이것을하는 방식 (너무 많은 코드)이 효율적 / 깨끗하지 않다고 생각한다. 따라서이 문제를 해결하는 방법에 대한 조언은 높이 평가됩니다. :). 내가 달성하고 싶은 스크린 샷은 아래와 같습니다. 개발을 위해 Font Awesome과 Bootstrap 3을 사용하고 있습니다.

내가 달성하고 싶은 것의 스크린 샷

락 샤이 바드와 즈

테이블 행에 div 디스플레이를 추가하십시오.

https://jsfiddle.net/q2x9sLo9/

주소

Mirpur New Bazar Road, 다카 -12101

<div style="background-color:#00ced1;display: table-row;">
<i class="fa fa-envelope" style="float:left; padding:18px; background-color:#00ced1; color:white; font-size:40px"></i>
<div style="float:left; background-color:#00ced1; color:white;">
<h4>
E-mail
</h4><p>
[email protected]
</p>
</div>
</div>

<div style="background-color:#00ced1;display: table-row;">
<i class="fa fa-phone" style="float:left; padding:18px; background-color:#00ced1; color:white; font-size:59px"></i>
<div style="float:left; background-color:#00ced1; color:white;">
<h4>
Phone
</h4><p>
(732) 803-01 03
</p>
</div>``
</div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관