Domanda

Che cosa sto cercando di realizzare è questo:

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 ...
.

Questo per allineare la colonna destra del testo ?È possibile farlo tramite Markdown, o forse tramite tavoli HTML o CSS, ma in modo tale che un bordo della tabella non sia visibile?

È stato utile?

Soluzione

Here the HTML and CSS as per your question.

<!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>

For output here is the fiddle: http://jsfiddle.net/LsGSc/

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top