0

我想让“shadow-repeat block”高度为 100%，而“shadow-up”与顶部对齐，“shadow-down”与底部对齐，两者都是固定高度，例如 200px

<div class="center">
    <div class="right-shadow">
        <div class="shadow-up"></div>
        <div class="shadow-repeat"></div>
        <div class="shadow-down"></div>
    </div>
        <div class="content">
        </div><!--content-->
    <div class="left-shadow">
        <div class="shadow-up"></div>
        <div class="shadow-repeat"></div>
        <div class="shadow-down"></div>
    </div>
</div><!--center-->

至于现在我没有得到正确的结果。如果有办法使它正确，请帮助。

.left-shadow{
    width: 22px;
    float: left;
    position: absolute;
    left: -22px;
    top:0px;
    height: 100%;
}
.right-shadow .shadow-up{
    background: url('img/shadow-part-one.png') no-repeat -22px 0px transparent;
    height: 257px;
}
.right-shadow .shadow-repeat{
    height: 100%;
    background: url('img/shadow-part-two.png') repeat-y -22px 0px transparent;
}
.right-shadow .shadow-down{
    background: url('img/shadow-part-three.png') repeat-y -22px 0px transparent;
    height: 260px;
}
.center{
    margin-right: 20px;
    margin-left: 20px;
    position: relative;
    float: left;
}

.content{
    float: left;
    width: 1100px;
}
4

2 回答 2

0

像这样？

CSS：

    .center{
    margin: 0 auto;
    text-align: center;
    width:50%;
}
.right-shadow{
    float:right;
    background:blue;
}
.left-shadow{
    float:left;
    background:green;
}
.shadow-up{
    height:200px;
    width:100%;
    background:yellow;
}
.shadow-down{
    height:200px;
    width:100%;
    background:red;
}
.right-shadow .shadow-up{
    float:right;
}
.right-shadow .shadow-down{
    float:right;
}

HTML：

<div class="center">
    <div class="right-shadow">
        <div class="shadow-up"></div>
        <div class="shadow-repeat">right content</div>
        <div class="shadow-down"></div>
    </div>
    <div class="left-shadow">
        <div class="shadow-up"></div>
        <div class="shadow-repeat">left content</div>
        <div class="shadow-down"></div>
    </div>
        <div class="content">Here is some content</div><!--content-->
</div><!--center-->
于 2013-06-20T14:28:59.383 回答
0

因此，如果我理解您的问题，我相信您将采用三列布局，其中中间列始终是其父列的 100%，而侧列可以采用任何高度。我已经为这个答案大量抽象了你的标记，所以你必须把它翻译回来，但它会实现你的目标。

HTML

<div class="center">
    <div class="left-shadow">
    </div>

    <div class="right-shadow">
    </div>

    <div class="content">
    </div>
</div>

请注意，两个阴影 div 已移动到内容区域的顶部。我们将左右浮动阴影，有效地将它们从流中移除（无论如何，为了我们的目的）。浮动元素不像普通的块元素那样咄咄逼人；他们有一个位置，但其他块元素不会被他们推下页面（内联元素是另一回事）。然而，浮动元素可以被现有的块元素推送，因此我们希望将它们声明在内容区域上方，否则会将它们向下推送。

CSS

.center
{
    padding: 20px;
    margin: 20px;
    height: 500px;
    background-color: #333333;
}

.left-shadow
{
    background-color: pink;
    width: 200px;
    height: 400px;
    float: left;
}

.right-shadow
{
    background-color: green;
    width: 300px;
    height: 300px;
    float: right;
}

.content
{
    margin-right: 320px;
    margin-left: 220px;
    height: 100%;
    background-color: orange;
}

实际上，我们正在做的是左右浮动边箱，然后在中间箱上设置边距，使其不与边重叠。一开始可能有点棘手，但它非常扎实。由于我们的中间元素现在是一个非浮动块，我们可以轻松地将其高度设置为 100%。同样，侧面可以设置为您希望它们达到的任何高度（或者只是使其内容高度！）。

于 2013-06-20T15:29:16.153 回答