CSS2 DIV Présentation Numéro

Je dois créer une page qui a des cotes côte à côte pour un grand nombre de lignes.Je cherche une présentation CSS2 propre où les citations de chaque ligne s'alignent verticalement et ne s'exécutent pas En outre, je suis à la recherche d'une solution avec le moins de code et de préférence un qui ne flotte pas de DIVs et utilise l'attribut d'affichage. Re: le code ci-dessous, mon idée est de contenir chaque citation dans son propre DIV (dans l'espoir d'avoir les guillemets d'une ligne d'affichage côte à côte) et avoir les DIV d'une rangée sont contenues par un parent DIV (dans l'espoir d'avoir les citations dans la rangée suivante aligner verticalement). déchiquetez le code. Commencez un nouveau. Faites ce que vous voulez pour me faire savoir où je vais mal.CSS2 DIV Présentation Numéro

<html> 
<head> 
<style type="text/css"> 

    body 

    { 
     font-family:Verdana; 
     font-size:11px; 
    } 

    div#mainContainer 

    { 
     width:570px; 
    } 


    div#mainContainer div.subContainer 
    { 
     margin:30px; 
    } 

    div#mainContainer div.subContainer div 
    { 
     vertical-align:top; 
     width:285px; 
    } 

    div#mainContainer div.subContainer div.contentLeft 
    { 
     float:left; 
     margin-right:45px; 
    } 

    div#mainContainer div.subContainer div.contentRight 
    { 
     display:inline; 
    } 

</style> 
</head> 
<body> 
<div id="mainContainer"> 
    <h1>Title</h1> 
    <div class="subContainer"> 
     <div class="contentLeft"> 
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut." 
      <p>Bill, New York</p> 
     </div> 
     <div class="contentRight"> 
      "Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation." 
      <p>Fred, Detroit</p> 
     </div> 
    </div> 
    <div class="subContainer"> 
     <div class="contentLeft"> 
      "Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint." 
      <p>Sarah, Seattle</p> 
     </div> 
     <div class="contentRight"> 
      "Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut." 
      <p>Phil, Austin</p> 
     </div> 
    </div> 
    <div class="subContainer"> 
     <div class="contentLeft"> 
      "Labore et dolore magna aliqua. Ut enim ad." 
      <p>Jon, Petrolia</p> 
     </div> 
     <div class="contentRight"> 
      "Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia." 
      <p>Chris, Burlington</p> 
     </div> 
    </div> 
</div> 
</body> 
</html>

Source

2009-05-07 Anonymous

<!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> 
<title>Title</title> 
<style type="text/css"> 

    body { 
     font-family:Verdana; 
     font-size:11px; 
    } 

    #mainContainer { 
     width: 600px; 
    } 

    .quoteBox { 
     width: 300px; /* Half the width of the mainContainer to ensure there is always space to exactly TWO quotes on each row */ 
     float: left; 
    } 

    .clearer { 
     height: 0; 
     font-size: 0; 
     clear: both; /* Clear the line to ensure no quotes end up partly below another one. Follow the pattern: Two quotes, clear, two quotes, clear etc... */ 
    } 

    blockquote,cite { margin: 12px } 

</style> 
</head> 
<body> 
<div id="mainContainer"> 
    <h1>Title</h1> 
     <div class="quoteBox"> 
      <blockquote>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut."</blockquote> 
      <cite>Bill, New York</cite> 
     </div> 

     <div class="quoteBox"> 
      <blockquote>"Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation." </blockquote> 
      <cite>Fred, Detroit</cite> 
     </div> 

     <div class="clearer">&nbsp;</div> 

     <div class="quoteBox"> 
      <blockquote>"Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint."</blockquote> 
      <cite>Sarah, Seattle</cite> 
     </div> 

     <div class="quoteBox"> 
      <blockquote>"Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut."</blockquote> 
      <cite>Phil, Austin</cite> 
     </div> 

     <div class="clearer">&nbsp;</div> 

     <div class="quoteBox"> 
      <blockquote>"Labore et dolore magna aliqua. Ut enim ad."</blockquote> 
      <cite>Jon, Petrolia</cite> 
     </div> 

     <div class="quoteBox"> 
      <blockquote>"Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia."</blockquote> 
      <cite>Chris, Burlington</cite> 
     </div> 

</div> 
</body> 
</html>

Comme ça, par exemple? Réduit un peu le nombre d'éléments DIV excédentaires et nettoie un peu le CSS. L'air plus propre, et devrait fonctionner de la façon dont vous avez décrit votre problème. Blockquote et les éléments de cite utilisés pour ajouter des significations sémantiques au document

Source

2009-05-07 20:14:47

sans dévier beaucoup de vos éléments d'origine (bien que la suggestion que vous ajoutez une signification sémantique à des éléments internes est bonne), je suis arrivé succès en remplacement de votre élément avec ceci:

body 
{ 
    font-family: Verdana; 
    font-size: 11px; 
} 

div#mainContainer 
{ 
    width: 645px; 
} 

div.subContainer 
{ 
    margin: 30px; 
} 

div.subContainer div 
{ 
    vertical-align: top; 
    float: left; 
    width: 285px; 
} 

div.contentLeft 
{ 
    margin-right: 45px; 
}

Notez que vos calculs sur des largeurs étaient trop bas. J'ai testé cela avec IE8, pas FF, mais cela devrait fonctionner. Si vous utilisez IE8, une nouvelle barre d'outils développeur très puissante est intégrée, qui comprend un volet Mise en page qui affiche des valeurs de décalage, de marge, de bordure et de remplissage efficaces sur tous les côtés d'un élément.

Source

2009-05-08 07:34:12

CSS2 DIV Présentation Numéro

Répondre

Questions connexes