Div w /边框图像 [英] Div w/ Border Images

问题描述

什么是一个好的方法来设置一个单一的容器div，它周围有一些边框图像（在我的情况下只在左边，底部和右边）？

What is a good way to set up a single container div with some border images surrounding it (in my case only on the left, bottom, and right sides)? I have it centered at the top of the page, overlapping everything else (so like that OSX-style slide-down dialog).

这是基本的布局：

这里是我到目前为止（我可以避免内容的静态宽度/高度）：

Here's what I've got so far (can I avoid a static width/height for the content?):

HTML：

<div class="contentbox">
    <div class="contentbox-wrapper" style="width: 400px">
        <div class="contentbox-mid" style="height: 200px">
            <div class="contentbox-w"></div>
            <div class="contentbox-content">
                Content Box Test
            </div>
            <div class="contentbox-e"></div>
        </div>
        <div class="contentbox-bottom">
            <div class="contentbox-sw"></div>
            <div class="contentbox-s"></div>
            <div class="contentbox-se"></div>
        </div>
    </div>
</div>

CSS：

.contentbox {
    width: 100%;
    position: fixed;
    z-index: 2;
}

.contentbox-wrapper {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.contentbox-mid {
    height: 100px;
}

.contentbox-w {
    width: 30px;
    height: 100%;
    background: transparent url("../../images/contentbox_w.png");
    float: left;
}

.contentbox-content {
    width: auto;
    height: 100%;
    background: #e8e8e8;
    float: left;
}

.contentbox-e {
    width: 30px;
    height: 100%;
    background: transparent url("../../images/contentbox_e.png");
    float: left;
}

.contentbox-bottom {
    width: 300px;
    height: 30px;
}

.contentbox-sw {
    width: 30px;
    height: 30px;
    background: transparent url("../../images/contentbox_sw.png");
    float: left;
}

.contentbox-s {
    height: 30px;
    background: transparent url("../../images/contentbox_s.png");
    margin-left: 30px;
    margin-right: 30px;
}

.contentbox-se {
    width: 30px;
    height: 30px;
    background: transparent url("../../images/contentbox_se.png");
    float: right;
    position: relative;
    bottom: 30px;
}

推荐答案

（混合标记和设计），通常不是集成商得到最后的词。然而，你仍然应该尽量保持一切尽可能干净。

While none of this is recommendable (mixing markup and design), it's often not the integrator who gets the final word. However, you should still attempt to keep everything as clean as possible.

您的结构几乎是唯一可用于结尾的结构，但如果您的宽度是静态的（300像素？），我建议您您的div背景作为一个较大的图像垂直重复。

Your structure is pretty much the only kind of structure you can use to your ends, although if your width is static (300px?), I'd advise you to have your div background as one larger image repeated vertically.

然后在div中有一种页脚，您可以将两个底角和底部图片都放在一个单独的图片中。而不是在一个内有5个div，你只有一个。请注意，在更大的环境中，这也意味着用户可以并行下载2个以上的图片（从单个主机最多4个），从而使整个页面的下载速度更快。

You'd then have a kind of footer within your div, where you could put the two bottom corners and the bottom picture all in one single image. Instead of having 5 divs inside one, you'd only have one. Note that in bigger environment, this also means the user can download 2 more images in parallel (4 max from a single host), making the overall download of the page faster.

如果你的宽度是相对于父级或者以任何方式改变，这显然不起作用。

This obviously doesn't work if your width is relative to the parent or can change in any manner though.

：因为它发生你指定的宽度是可变的，我不认为有一个更清洁的光的方式做它的HTML方式。

as it happens you specified the width is variable, I don't think there's a cleaner light way to do it HTML-wise.

但是，如果你仍然想最大化图像的下载速度，考虑使用精灵：东侧和西侧图像可以放在同一个更大的图像：您修改的唯一的事情是背景位置：

However, if you still want to maximize the speed of download for the images, consider using sprites: the east and west side images can be put inside the same bigger image: the only thing you modify is the background position:

background-position: 32px 0px; /* this should move the background to the right */

优点是你只需要一张图片，

The advantage is you only need one picture, less connections are needed to download them for the client (faster) and it takes as much place.

希望这有助于。

这篇关于Div w /边框图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！