0

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

回复：下面的代码，我的想法是将每个引号包含在它自己的 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>
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;
}

请注意，您对宽度的计算太低了。我用 IE8 测试了这个，而不是 FF，但它应该可以工作。如果您使用的是 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>

比如这样？稍微减少了多余的 DIV 元素的数量，并稍微清理了 CSS。看起来更干净，并且应该按照您描述问题的方式工作。

blockquote 和 cite-elements 用于向文档添加语义。

于 2009-05-07T20:14:47.363 回答