CSS 스타일링 - div 안에 다른 글꼴 크기의 스팬

여러개의시에서 같은 줄을 비교하는 코드 조각이 있습니다. 이 라인의 첫 글자는 다음과 같이 큰 자본으로 원고 원본에 나타날 때를 제외하고 잘 작동 :CSS 스타일링 - div 안에 다른 글꼴 크기의 스팬

당신이 볼 수 있듯이, 그 비교가 모든 남았습니다 얻을 일어날 때. 승는 div의 내부에 캡슐화 된 span 때문에 지금까지 내가 말할 수있는 건,이는 다음과 같습니다 비교가 onclick을 생성하기 때문에 자바 스크립트를 통해 생성 된 스타일 속성을

<div class="comparison" id="EETS.QD.1" style="display: block;"> 
    <div class="compare_item" style="margin-left: 25px;">London, British Library Harley 2251: 
     <a style="text-decoration:none; color:#D5D5E5;" href="Quis_Dabit/British_Library_Harley_2251/British_Library_Harley_2251_f42v.html"> 
      <span class="capital_2_blue">W</span> 
     ho shal gyve · vnto my hede a welle 
     </a> 
    </div> 
</div>

. CSS는 내가 스타일 div의 모두에 사용하고 범위는 다음과 같다 :

div.comparison { 
    display: block; 
    height: auto; 
    width: 755px; 
    margin-right: 10px; 
    padding-left: 10px; 
    margin-left: auto; 
    background-color: #454595; 
    border-width: 1px; 
    font-size: 12pt; 
    color: #EFFFFF; 
    display: none; 
} 

span.capital_2_blue{ 
    float: left; 
    color: blue; 
    font-size: 60pt; 
    line-height: 12pt; 
    padding-top: 30px; 
    padding-bottom: 20px; 
    padding-right: 20px; 
}

내 질문은 이것이다 : 어떤 대형 문자의 실제 줄의 시작 부분에 표시되도록 나는 각 줄을 표시하는 방법 텍스트, 예상대로? 이것은 내가가 촬영하고있는 무슨이다 :

내 span의 스타일에 display:contents을 추가하여, 일종의, 그것을 달성 할 수있었습니다, 그러나 그것은 W는 생성의 외부를 확장 할 수 있습니다

가 어떻게 이니셜 그들이 적절한 텍스트에 표시하고 높이 머물고 있지만으로 포장하지와 함께, 내가 바라고있어 모양을 달성하기 위해 이러한 요소를 스타일링 가겠어요 : 페이지 div 그들은 까맣다. 삼촌? 그리고 span이 주위를 멋지게 재생할 수 있도록하려면 어떻게해야합니까? div? 고맙습니다.

출처

2017-11-29 medievalmatt

예상되는 결과가 확실하지 않습니다. 어쩌면'float : left'을 제거하고'display : inline-block'을'span.capital_2_blue'에 추가해야합니다. –

그건 그렇습니다. 다른 곳에서 사용되는 곳과 구별하기 위해 더 많은 CSS를 추가해야한다는 것을 의미합니다. 정식 답장으로 쓰고 싶다면 투표 해 주셔서 감사합니다. 감사합니다! – medievalmatt

float:left을 제거하고 display:inline-block을 span.capital_2_blue으로 추가해야합니다.

정상적인 흐름 및 기타 콘텐츠에서 떠 다니는 콘텐츠를 제거하면 콘텐츠가 감싸기 때문입니다. https://developer.mozilla.org/en-US/docs/Web/CSS/float

출처

2017-11-29 21:10:32

CSS 스타일링 - div 안에 다른 글꼴 크기의 스팬

답변

관련 문제