文章/答案/技术大牛

发布

问CSS2 DIV演示文稿问题
EN

Stack Overflow用户

提问于 2009-05-07 19:42:45

回答 2查看 298关注 0票数 0

我需要创建一个页面，其中有大量的行并排引用。我正在寻找一个干净的CSS2演示文稿，其中每行的引号垂直排列，而不是运行在每个DIVs下面，我正在寻找一个具有最少的代码量的解决方案，最好是一个不浮动other.Also并利用显示属性的解决方案。

Re:下面的代码，我的想法是将每个引号包含在它自己的DIV中(希望让一行的引号并排显示)，并让一行的DIV包含在父DIV中(希望让下一行的引号垂直排列)。分解代码apart.Start一个new.Do，无论你需要什么，让我知道我哪里错了。

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

css-float

css

html

回答 2

Stack Overflow用户

发布于 2009-05-07 20:14:47

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

票数 0

Stack Overflow用户

发布于 2009-05-08 07:34:13

在没有太多偏离原始元素的情况下(尽管向内部元素添加语义的建议很好)，我成功地将您的元素替换为以下内容：

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，有一个新的非常强大的内置开发工具栏，它包括一个布局窗格，可以在元素的所有边显示有效的偏移、边距、边框和填充值。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/836620

复制

相似问题

问CSS2 DIV演示文稿问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS2 DIV演示文稿问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS2 DIV演示文稿问题
EN