Comment tenir trois alignements de texte différents dans une boîte CSS?

Question

Bonjour,

J'ai une simple question CSS. Je suis en train de changer une table en CSS, mais aligner le contenu de la table est difficile pour moi maintenant. Ci-dessous, il y a un exemple de ce qui est à l'intérieur de la boîte CSS que j'ai créée. Comment puis-je aligner correctement ces trois éléments (calendrier et icône vers la gauche, un lien vers le centre vers le centre et l'autre vers la droite?) Correctement?

J'ai essayé plusieurs choses mais le problème est de l'aligner correctement. Je veux tout changer dans cette application qui a été créée avec des tables, css. Et j'ai été un succès de 80% jusqu'à présent. Je voudrais voir un code facile à comprendre, pour voir comment je peux l'appliquer sur mon code. Nous vous remercions de votre aide. Je pourrais être épuisé à cause du stress.

[Calendar (icon)     Link        Date] 

MISE À JOUR # 1

Voici le code pour ce que je dis:

<asp:UpdatePanel runat="server" ID="updHoldingsPanel" UpdateMode="Always"> 
     <ContentTemplate>   
       <div class="sitenote"> 
       <table valign="absmiddle" border="0" cellpadding="0" cellspacing="0">     
        <tr style="height: 19px"> 
         <td valign="absmiddle" style="text-align: left; width: 9%;"> 
          <asp:Panel ID="pnlDateZero" runat="server" Width="187px"> 
           <table valign="middle" border="0" cellpadding="0" cellspacing="0"> 
            <tr> 
             <td valign="middle"> 
              <asp:Label ID="Label1" runat="server" Text="As of" Width="40px"></asp:Label></td> 
             <td valign="middle" style="width: 80px"> 
             <asp:TextBox ID="txtDate" runat="server" AutoPostBack="True" Width="80px" Height="15px" OnTextChanged="txtDate_TextChanged" ></asp:TextBox> 
              <%--<asp:TextBox ID="txtDate" runat="server" AutoPostBack="True" Width="80px" Height="15px" contentEditable="false" OnTextChanged="txtDate_TextChanged" ></asp:TextBox>--%> 

             </td> 
             <td valign="absmiddle"> 
             <span style="float:left; vertical-align:top; padding-top:0px; padding-top:1px;"> 
              <asp:ImageButton align="middle" ID="imgCalendar" runat="server" ImageUrl="~/images/calendar5.gif"/>            
             <%--<cc1:CalendarExtender ID="ceDate" runat="server" PopupButtonID="imgCalendar" Format="MM/dd/yyyy" TargetControlID="txtDate" FirstDayOfWeek="Monday"></cc1:CalendarExtender>--%> 
             </span> 
             </td> 

            </tr> 
           </table> 
          </asp:Panel> 
          <asp:Label ID="lblAsOf" Text="" runat="server" Visible="False"></asp:Label></td> 
         <td style="text-align:center; width: 27%;"> 
          &nbsp;</td>      
         <td style="text-align:center; width: 11%;"> 
          <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LINK</asp:LinkButton> 
         </td> 

         <td style="text-align:left; width: 2%;"> 
          <asp:UpdateProgress AssociatedUpdatePanelID="updHoldingsPanel" id="UpdateProgress1" runat="server" DisplayAfter="100" DynamicLayout="false"> 
           <ProgressTemplate> 
            <asp:Image ID="Image3" runat="server" ImageUrl="~/images/live_com_loading.gif"> 
            </asp:Image> 
           </ProgressTemplate> 
          </asp:UpdateProgress> 
         </td> 
         <td valign="absmiddle" style="text-align: right; width: 1%;"> 
          &nbsp;</td> 
         <td style="text-align: right; valign="absmiddle"> 
          <asp:CheckBox ID="chkInclude" runat="server" AutoPostBack="true" 
           OnCheckedChanged="chkInclude_CheckedChanged" Text="Include Zero Holdings" 
           VerticalAlign="Middle" /> 
         </td> 
        </tr> 
       </table> 
      </div> 

ET LE CSS EST DE LA BOITE:

.sitenote { 
    display:block; 
    padding:6px; 
    border:1px solid #bae2f0; 
    background:#e3f4f9; 
    line-height:130%; 
    font-size:13px; 
    margin-top: 0; 
    margin-right: 0; 
    margin-bottom: 0.5em; 
    margin-left: 0; 
} 

Answer 1

<div style="float:left">left</div> 
<div style="float:right">right</div> 
<div style="text-align:center">center</div> 

Answer 2

Vous besoin de combiner float:left et float:right éléments et text-align propriété css

code complet à: http://jsbin.com/ilano3/3/edit

Answer 3

Essayez quelque chose comme ceci:

<style type="text/css" media="all"> 
    .row { border: 1px solid black; text-align: center; } 
    .row > .left { float: left; } 
    .row > .center { display: inline-block; } 
    .row > .right { float: right; } 

    /* after/inline-block (FF, IE5.5-7, S2, O9) */ 
    .row:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } 
    .row { display: inline-block; } 
    .row { display: block; } 
</style> 

<div class="row"> 
    <div class="left">Calendar (icon)</div> 
    <div class="center">Link</div> 
    <div class="right">Date</div> 
</div> 

Le divs gauche et à droite sont simplement positionnés avec flotteur et sont contenus dans le flotteur par le. row: après ... CSS à la fin. Le centre div acceptera text-align: center de la ligne, puisqu'il est inline-block.

Notez que la pièce centrale est alignée en fonction de l'espace disponible entre les float s; plusieurs lignes ont des centres mal alignés. Aussi, en l'état, une largeur trop étroite fera que la dernière pièce (de gauche/centre/droite) ira à une nouvelle ligne; il peut y avoir un moyen de le tronquer avec un débordement, mais cela dépend de ce que vous allez faire.

Espérons que cela aide!

Answer 4

Vous pouvez utiliser quelque chose comme ça, je pense que c'est la plus simple approche:

<style> 
    .wrapper { 
     width: 600px; 
    } 

    .column { 
     float: left; 
     width: 200px; 
    } 

    .first { 
     text-align: left; 
    } 

    .second{ 
     text-align: center; 
    } 

    .third{ 
     text-align: right; 
    } 
</style> 

<div class="wrapper"> 
    <div class="column first"> 
     icon 
    </div> 

    <div class="column second"> 
     link 
    </div> 

    <div class="column third"> 
     date 
    </div> 
</div> 

Vous pouvez ajouter CSS pour .first, .SECOND et .third changer leur largeur, alignement du texte, la couleur .. .

http://jsfiddle.net/T8JMM/2/

Answer 5

Si vous avez vraiment besoin de vos données/texte dans les colonnes, vous ne devriez pas éviter les tables. Les tableaux sont utilisés pour les données tabulaires et si c'est ce que vos données sont, continuez simplement à les utiliser. La seule mauvaise chose à propos des tables est quand vous l'utilisez pour le design.Il me semble que ce que vous essayez d'afficher des données tabulaires est donc juste utiliser « em :)

Pour vérifier si vos données est liée à afficher dans les tableaux, répondez aux questions suivantes:

1. Si l'icône, le lien et la date sont sur la même ligne TOUJOURS?
2. La date sur le côté droit est-elle liée au lien sur le côté gauche?

Si vous avez répondu oui aux deux questions, utilisez un tableau.

Sinon, utilisez des listes. Séparer l'icône, lien et les données de date dans des listes comme ceci:

<ul class="icon-list column"> 
    <li>Calendar (icon)</li> 
    <li>Calendar (icon)</li> 
    <li>Calendar (icon)</li> 
</ul> 

<ul class="link-list column"> 
    <li>Link</li> 
    <li>Link</li> 
    <li>Link</li> 
</ul> 

<ul class="date-list column"> 
    <li>Date</li> 
    <li>Date</li> 
    <li>Date</li> 
</ul> 

Ensuite, en utilisant css, il suffit de les flotter et ajouter une certaine largeur:

.column { 
    float: left; 
    width: 33%; 
} 

Ne pas oublier d'effacer les flotteurs! :)