2012-03-09 3 views
1

То, что я пытаюсь выполнить это:Можно ли выравнивать текст влево/вправо через таблицу в уценке?

Name Surname              Phone: 123 
Joe Cool               Fax: 123 
Charlie Brown              Email: 123 

Some more text goes here, after these two introductory columns. Normal text just 
keeps going, and going, and going ... 

что для выравнивания правого столбца текста? Можно ли сделать это через Markdown или, может быть, через таблицы HTML или CSS, но таким образом, чтобы граница таблицы не была видна?

ответ

1

Здесь HTML и CSS согласно вашему вопросу.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<style type="text/css"> 
.panel-inside { 
    padding-left: 0px; 
    padding-right: 0px; 
    overflow:auto; 
} 

.row         
{ 
    height: 30px;  
    width:100%;   
    vertical-align:middle; 
} 

.label        
{ 
    font-size: 12pt; 
    display:inline;  
    float:left; 
    margin-left:5px; 
    width:200px; 
} 

.label-right 
{ 
    font-size: 12pt; 
    color:#686868; 
    display:inline;  
    float:right; 
    margin-right:7px; 
    width:200px; 
} 

.listSeparator     
{ 
    clear:both; 
    height:0; 
} 

</style> 
</head> 

<body> 

<div class="panel-inside"> 
    <div class="row"> 
     <div class="label">Name Surname </div> 
     <div class="label-right">Phone: 123</div> 
    </div> 
    <div class="listSeparator">&nbsp</div> 
    <div class="row"> 
     <div class="label">Joe Cool</div> 
     <div class="label-right">Fax: 123</div> 
    </div> 
    <div class="listSeparator">&nbsp</div> 
    <div class="row"> 
     <div class="label">Charlie Brown</div> 
     <div class="label-right">Email: 123</div> 
    </div> 
</div> 
<div id="content"> 
    <p>Some more text goes here, after these two introductory columns. Normal text just keeps going, and going, and going ... 
</p> 
</div> 

</body> 
</html> 

Для вывода здесь является скрипку:http://jsfiddle.net/LsGSc/

+0

Я сожалею Динеш. Я полностью забыл об этом вопросе (до минуты, когда кто-то его поддержал). HTML-путь казался слишком сложным, поэтому я просто переписал весь документ в LaTeX. Это был короткий документ, но его нужно было отформатировать в соответствии со спецификацией. – Rook