Question

我需要创建一个并排引用大量行的页面。我正在寻找一个干净的CSS2演示文稿，其中每行的引号垂直排列并且不会在彼此之下运行。此外，我正在寻找一个代码最少的解决方案，最好是一个不浮动DIV并使用display属性的解决方案。

Re：下面的代码，我的想法是在其自己的DIV中包含每个引用（希望并排显示一行的引号）并且父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>

Answer 1

<!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用于为文档添加语义含义。

Answer 2

没有偏离原始元素（尽管你向内部元素添加语义意义的建议是好的），我通过用这个替换你的元素来获得成功：

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

请注意，您对宽度的计算太低。我用IE8测试了这个，而不是FF，但它应该可行。如果您使用的是IE8，则会内置一个非常强大的开发人员工具栏，其中包含一个布局窗格，可在元素的所有边上显示有效的偏移，边距，边框和填充值。

CSS2 DIV演示文稿问题

2 个答案: