이미지와 같은 요소를 CSS로 배치하려면 어떻게해야합니까?

Question

나는이 디자인 달성하기 위해 함께 플레이하는 두 개의 선택기가 : 나는 거의 모든 시도

을하지만 난 그냥 문이 안 열려 큰 글자 바로 옆에 떠있는 텍스트를 얻을 수가

여기

Jsbin

HTML :

코드입니다

<div class="processlinks-section-template"> 
<div class="processlinks-section-item" data-letter="H"> 
    <div class="processlinks-section-item-title"> 
     <a href="http://aftonbladet.se">Haftonbladet.se</a> 
    </div> 
    <div class="processlinks-section-item-title"> 
     <a href="http://teabagz.com">Hteabagz.com</a> 
    </div> 
</div> 

<div class="processlinks-section-item" data-letter="C"> 
    <div class="processlinks-section-item-title"> 
     <a href="http://Cftonbladet.se">Cftonbladet.se</a> 
    </div> 
    <div class="processlinks-section-item-title"> 
     <a href="http://Cteabagz.com">Cteabagz.com</a> 
    </div> 
</div> 
</div> 

CSS : 도움의 모든 종류의

참고 감사

[data-letter] { 
margin:7px; 
background:#ef8; 
} 
[data-letter]:before { 
content:attr(data-letter); 
font-size:36px; 
margin:7px; 
} 
.processlinks-section-template 
{ 
width: 270px; 
height: 100%; 
} 
} 
.processlinks-section-item-title 
{ 
margin-top:5px; 
} 
.processlinks-section-item-title a 
{ 
color:black; 
} 
.processlinks-section-item-title a:visited 
{ 
color:black; 
} 
.processlinks-section-item-title a:hover 
{ 
color:#0084c9; 
} 

: 나는 오히려 단지이 두 선택기와 함께 머물 수 있도록 물건을 추가 자바 스크립트가 있습니다.

하나의 항목이있는 경우 디자인을 망칠 것으로 보이며 나는 그 문제라고 생각합니다. jsbin.com/UHiZUJU/9/edit

Answer 1

이 섹션 컨테이너에 clear: left를 문자가 들어있는 :before 사이비 요소에 float: left를 추가하고 :

[data-letter]:before { 
    content:attr(data-letter); 
    font-size:36px; 
    margin:7px; 
    display:inline-block; 
} 
.processlinks-section-item { 
    clear:left; 
} 

Updated JSBin

현재 귀하의 :before psuedo-

보세요 요소는 display 선언이 없을 경우 기본적으로 display: block입니다. 자동으로 부모와 함수의 너비를 100 % 채우고 그 뒤에 줄 바꿈이있는 것처럼 기능합니다 (inline 요소와 비교).

부동 소수점 block 요소는 전체 너비를 채우는 일반적인 동작이 아니라 필요한 폭을 채우고 줄 바꿈의 암시 적 존재를 제거한다는 것을 의미합니다. 컨테이너의 clear: left은 각 섹션에 대해 부동가 재설정되도록합니다.

Answer 2

문자와 왼쪽의 링크를 모두 놓고 clearfix를 추가하십시오.

Updated jsfiddle

Answer 3

는 여백 변경하려면 이미지를 같이 만들려면 : 자동 7px을;