0

多数の行の引用符を並べたページを作成する必要があります。各行の引用符が垂直に並んでいて、互いに下に並んでいない、クリーンなCSS2プレゼンテーションを探しています。コードの量が最も少なく、できればDIVをフロートせず、display属性を利用するソリューションを探しています。

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

2 に答える 2

0

元の要素から大きく逸脱することなく（内部要素に意味的な意味を追加するという提案は良いですが）、要素を次のように置き換えることで成功しました。

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-08T07:34:12.503 に答える
0 
<!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>

Like this, for example? Reduced the number of excess DIV-elements a bit, plus cleaned the CSS a little. Looks cleaner, and should work the way you described your problem.

blockquote and cite-elements used to add semantic meanings to the document.

于 2009-05-07T20:14:47.363 に答える