인라인 블록 CSS

테이블을 사용하지 않고 "소스"& "DEC"필드와 같이 한 줄의 텍스트처럼 한 줄 이상 감싸는 텍스트를 사용하고 싶습니다.인라인 블록 CSS

enter image description here 필자는 인라인 블록을 사용하여이 작업을 수행 할 수 있어야하지만 성공하지 못했습니다.

아래는 내가 함께 일하고 있어요 간단한 HTML이다 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head id="head"> 
    <title></title> 
    <style type="text/css"> 
     .tt { color: #7777cc; width:85px; } 
     .cc { display: inline-block; } 
</style> 
</head> 
<body> 
    <div class="g1"> 
     <div class="expandable"> 
      <span class="tt">Source </span><span class="cc">Neutron energy was varied by changing the 
       emission angle to the deuteron beam. The activities of the "2"3"7U and "2"3"1Th 
       residual nuclei were measured by a Ge(Li) and a HP Ge gamma-spectrometer, respectively.</span> 
     </div> 
    </div> 
</body> 
</html>

출처

2011-05-02 itsbalur

작동하지 않는 기능은 무엇입니까? –

@Pekka : 클래스 "cc"아래의 텍스트를 "소스"와 같은 줄에서 시작하겠습니다. 랩을 할 때 "Source"라는 텍스트 아래에 랩핑하지 말아야합니다. – itsbalur

정말 저에게 테이블처럼 보입니다. 테이블 또는 적어도 정의 목록의 문제점은 무엇입니까? – RoToRa

당신은 단지 수레를 사용해야합니다.

.expandable { overflow:hidden; } /* Clears floats */ 
.tt { float:left; width:85px; } 
.cc { float:left; }

출처

2011-05-02 12:33:38 Seth

부유물은 지속적으로 학대 당하고 오해 된 것이므로이 경우에는 부양 할 필요가 없습니다. 이것은 모호한 해결책입니다. –

완전히 동의하지 않습니다. 동일한 목표를 달성하는 데 더 많은 코드가 필요합니다. 그것이 작동한다면 그것은 작동하고 그 것이 있어야합니다. 적은 코드가 더 나은 코드입니다. – Seth

사실,이 작동합니다. 항상 가능한 한 항상 수레가 필요없는 솔루션을 선호한다고 생각합니다. 나중에는 항상 두통을 피하는 것 같습니다. 그러나 "동일한 목표를 달성하는 데 더 많은 코드가 필요합니다"는 사실이 아닙니다. 미안 세스, 스카프한다는 뜻이 아니야. –

당신은 거의 그것을 가지고,이 시도 :

.tt { color: #7777cc; width:85px; } 
    .cc { display:inline-block;vertical-align:top;width:200px }

당신은 당신을 위해 작동 폭을 선택해야합니다.

데모 : http://jsfiddle.net/Madmartigan/FPtAS/

출처

2011-05-02 12:32:39

위대한! 고마워. 너비를 설정, 속임수를 했어! – itsbalur

먼저 정의 목록의 의미를 사용하는 것이 좋습니다. 그래서 그 대신

<div class="expandable"> 
    <span class="tt">Source</span> 
    <span class="cc">Neutron energy was varied by...</span> 
</div>

의 나는

<dl class="expandable"> 
    <dt>Source</dt> 
    <dd>Neutron energy was varied by...</dd> 
</dl>

을 작성하지만이 질문에 대답 :

float:left 및 clear:both "소스"는 "중성자 에너지에
display:block 및 margin-left:95px을 에 의해 다양했다 ... "

팁 : 왼쪽 열에있을 수있는 단어 중 가장 긴 단어를 찾아내어 em 단위로이 가장 긴 단어에 맞게 요소의 크기를 설정하십시오. 대부분의 경우 및 브라우저에서 픽셀보다 더 나은 결과를 얻을 수 있습니다.

출처

2011-05-02 12:44:02 Mushimo

인라인 블록 CSS

답변

관련 문제