CSS2 DIVプレゼンテーションの問題

多数の行のために引用符が並んでいるページを作成する必要があります。各行の引用符が垂直に並んでいて、実行しないクリーンなCSS2プレゼンテーションを探していますまた、私は最小限のコードで、そして好ましくはDIVを浮かべることなく、表示属性を利用するソリューションを探しています。CSS2 DIVプレゼンテーションの問題

Re：以下のコードは、自分のDIVに各引用符を入れることです（1行の表示を並べて表示することを期待しています）。そして、1行のDIVを親に含めるDIV（次の行の行を縦に並べることを望む）コードを分割してください。新しいものを開始してください。私が間違っている場所を教えてください。このよう

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

出典

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>

、例えば？余分なDIV要素の数を少し減らし、CSSを少しきれいにしました。きれいに見える、あなたの問題を記述した方法で動作するはずです。

意味の意味をドキュメントに追加するために使用されるblockquoteとcite-elements。（あなたは、内側の要素に意味論的な意味を追加する提案は良いですが）、私はこれを使って要素を置き換えることによって成功だオリジナルの要素からあまり逸脱することなく

出典

2009-05-07 20:14:47

：

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

注意をその幅で、あなたの計算あまりにも低かった。私はFFではなくIE8でこれをテストしましたが、うまくいくはずです。 IE8を使用している場合は、非常に強力な新しい開発者ツールバーが組み込まれています。これには、エレメントのすべての面に有効なオフセット、マージン、ボーダー、およびパディング値を表示するレイアウトペインが含まれています。

出典

2009-05-08 07:34:12

CSS2 DIVプレゼンテーションの問題

答えて

関連する問題