CSS2 DIV Präsentation Ausgabe

Ich muss eine Seite erstellen, die Anführungszeichen nebeneinander für eine große Anzahl von Zeilen hat. Ich suche nach einer sauberen CSS2-Präsentation, wo die Anführungszeichen jeder Zeile vertikal ausgerichtet sind und nicht ausgeführt werden Ich suche nach einer Lösung mit der geringsten Menge an Code und vorzugsweise einer, die keine DIVs überträgt und das Anzeigeattribut verwendet.CSS2 DIV Präsentation Ausgabe

Re: der Code unten, mein Denken soll jedes Zitat in seinem eigenen DIV enthalten (in der Hoffnung, die Anführungszeichen einer Zeile nebeneinander angezeigt zu haben) und die DIVs einer Zeile von einem Elternteil enthalten sein DIV (in der Hoffnung, dass die Anführungszeichen in der nächsten Zeile vertikal aufgereiht sind). Zerschneide den Code auseinander. Beginne ein neues. Tu, was immer du brauchst, um mich wissen zu lassen, wo ich falsch liege.

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

Quelle

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>

wie dies zum Beispiel? Reduziert die Anzahl der überschüssigen DIV-Elemente ein wenig, und bereinigt das CSS ein wenig. Sieht sauberer aus und sollte so funktionieren, wie Sie es beschrieben haben.

blockquote und cite-elements werden verwendet, um dem Dokument semantische Bedeutungen hinzuzufügen.

Quelle

2009-05-07 20:14:47

ohne viel von Ihrem ursprünglichen Elemente abweicht (obwohl der Vorschlag, die Sie semantische Bedeutung zu inneren Elemente hinzuzufügen, ist gut), ich Erfolg habe von Ihrem Element mit diesem ersetzen:

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; 
}

Beachten Sie, dass Ihre Berechnungen auf Breiten waren zu niedrig. Ich habe das mit IE8 getestet, nicht FF, aber es sollte funktionieren. Wenn Sie IE8 verwenden, ist eine neue, sehr mächtige Developer Toolbar integriert, die ein Layout-Fenster enthält, das die effektiven Offset-, Margin-, Border- und Padding-Werte auf allen Seiten eines Elements anzeigt.

Quelle

2009-05-08 07:34:12

CSS2 DIV Präsentation Ausgabe

Antwort

Verwandte Themen