Question

我需要制作具有最小宽度和最小高度的CSS布局，但会扩展到浏览器大小的80％。
主div将具有圆角（使用图像，因为不支持CSS3） - 但是，还有在顶部和底部以及左侧和右侧的角之间运行的图像。这也提供了阴影效果。
挑战是因为我有div这个位置：相对而我的角落然后位置：绝对（此时一切都很好），但后来我希望我的中间图像扩展以填充角落之间的空间。除非这不能正常工作，否则它会延伸到div的末尾。
我对一种全新的方法持开放态度，我在下面包含图片和代码，但是随着代码使用背景颜色而不得不使用我的图像，我们可以随意解决。

这是我想要实现的目标：

wireframe 以下是容器的图像：

这是一些代码......

HTML：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div class="pageWrapper">
        <div class="contentWrapper">
            <span class="top-left"></span>
            <span class="top-middle"></span>
            <span class="top-right"></span>
            <span class="bottom-left"></span>
            <span class="bottom-middle"></span>
            <span class="bottom-right"></span>
            <div class="content">
                <p>
                    Lorem ipsum dotor sit amet, consectetur adipiscing elit. 
                    Ut viverra lectus vitae est ullamcorper a tempus est commodo. 
                    Phasellus et pulvinar risus. Cras quis aliquet odio. Ut condimentum porta mi ultrices elementum. 
                    Maecenas feugiat magna at tellus convallis congue. Aenean tincidunt rutrum varius. Aenean nec eros id odio dapibus faucibus. 
                    Pellentesque blandit gravida erat id sodales. Etiam nunc odio, pharetra nec aliquam a, gravida at metus. Nullam dapibus vulputate blandit. 
                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ullamcorper lectus ut sapien scelerisque 
                    vitae ullamcorper mauris venenatis.
                </p>
            </div>  
        </div>
    </div>
</body>

CSS：

body {
background-color: #eeeee7;
}

.pageWrapper {
margin: 0px auto;       /* centers the div horizontally */
min-width: 900px;
min-height: 430px;
height: 80%;
width: 80%;
background-color: red;
}

.contentWrapper {
position: relative;        /* makes our corners absolute relative to our container not our browser window    */
background-color: yellow;
height: 100%;
width: 100%;
padding-right: 34px;
padding-left: 34px;
padding-top: 155px;
}

.top-left,
.top-right {
position: absolute;
height: 155px;
width: 34px;
background-color: blue;
}

.bottom-left,
.bottom-right {
position: absolute;
height: 29px;
width: 34px;
}

.top-left {
top: 0;
left: 0;
background-image:url('images/cornerLeftTop.jpg');
 }
 .top-right {
top: 0;
right: 0;
background-image:url('images/cornerRightTop.jpg');
 }
.bottom-left {
bottom: 0; 
left: 0;
background-image:url('images/cornerBottomLeft.jpg');
 }
.bottom-right {
bottom: 0;
right: 0;
background-image:url('images/cornerBottomRight.jpg');
 }
 .top-middle {
position: absolute;
top: 0;
left: 34px;
height: 155px;
width: 100%;
background-image:url('images/headerMiddle.jpg');
}

.bottom-middle {
position: absolute;
bottom: 0;
height: 29px;
width: 100%;
background-image:url('images/footerMiddle.jpg');
}

.middle-left {

}

.middle-right {

}

Answer 1

这对我有用，我仍然在完善最小宽度，但在＆lt;即8.我意识到有现代方法可以做到这一点。但是，我在一个必须仍然支持一些即6个用户的地方工作。这有效！

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div class="pageWrapper">
        <div class="contentWrapper">    
            <div class="headerMiddle">
            </div>
            <span class="top-left"></span>
            <span class="top-right"></span>
            <div class="contentRight">
            </div>                                  
            <div class="contentLeft">
            </div>  
            <div class="content">                   
                <p>
                    Lorem ipsum dotor sit amet, consectetur adipiscing elit. 
                    Ut viverra lectus vitae est ullamcorper a tempus est commodo. 
                    Phasellus et pulvinar risus. Cras quis aliquet odio. Ut condimentum porta mi ultrices elementum. 
                    Maecenas feugiat magna at tellus convallis congue. Aenean tincidunt rutrum varius. Aenean nec eros id odio dapibus faucibus. 
                    Pellentesque blandit gravida erat id sodales. Etiam nunc odio, pharetra nec aliquam a, gravida at metus. Nullam dapibus vulputate blandit. 
                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ullamcorper lectus ut sapien scelerisque 
                    vitae ullamcorper mauris venenatis.
                </p>
                <p>
                    Lorem ipsum dotor sit amet, consectetur adipiscing elit. 
                    Ut viverra lectus vitae est ullamcorper a tempus est commodo. 
                    Phasellus et pulvinar risus. Cras quis aliquet odio. Ut condimentum porta mi ultrices elementum. 
                    Maecenas feugiat magna at tellus convallis congue. Aenean tincidunt rutrum varius. Aenean nec eros id odio dapibus faucibus. 
                    Pellentesque blandit gravida erat id sodales. Etiam nunc odio, pharetra nec aliquam a, gravida at metus. Nullam dapibus vulputate blandit. 
                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ullamcorper lectus ut sapien scelerisque 
                    vitae ullamcorper mauris venenatis.
                </p>                    
            </div>

            <div class="footerMiddle">
            </div>
            <span class="bottom-left"></span>
            <span class="bottom-right"></span>      
        </div>  
    </div>
</body>

body {
    background-color: #eeeee7;
    text-align:center;
}

.pageWrapper {
    margin: 0px auto;       /* centers the div horizontally */
    min-width: 900px;
    height: 768px;
    width: 80%;
}

.contentWrapper {
    position: relative;        /* makes our corners absolute relative to our container not our browser window    */
    background-color: white;
    height: 100%;
    width: 100%;
    padding-top: 155px;
    text-align: left;
}

.content {
    padding: 75px;
}

.headerMiddle {
    position: absolute;
    top: 0;
    left: 0;
    height: 155px;
    width: 100%;
    background-image:url('images/headerMiddle.jpg');
}

.footerMiddle {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 29px;
    width: 100%;
    background-image:url('images/footerMiddle.jpg');    
}

.contentLeft {
    float: left;
    height: 100%;
    width: 34px;
    background-image:url('images/contentLeft.jpg');
}

.contentRight {
    float: right;
    height: 100%;
    width: 34px;
    background-image:url('images/contentRight.jpg');
}

.top-left,
.top-right {
    position: absolute;
    height: 155px;
    width: 34px;
    background-color: blue;
}

.top-left {
    top: 0;
    left: 0;
    background-image:url('images/cornerLeftTop.jpg');
}

.top-right {
    top: 0;
    right: 0;
    background-image:url('images/cornerRightTop.jpg');
}

.bottom-left,
.bottom-right {
    position: absolute;
    height: 29px;
    width: 34px;
}

.bottom-left {
    bottom: 0; 
    left: 0;
    background-image:url('images/cornerBottomLeft.jpg');
}
.bottom-right {
    bottom: 0;
    right: 0;
    background-image:url('images/cornerBottomRight.jpg');
}

.minWidth {
    width: 600px;
    height:1px;
}

CSS布局方法：圆角不是CSS3＆amp;两侧的图像（不仅仅是角落）

1 个答案: