Question

我正在试图弄清楚如何获得我的计划布局。

我正在尝试在页面周围放置一个白色边框（当在容器中滚动内容时，边框应该仍然在顶部）。现在有一个边框，但是当调整浏览器窗口大小或者content_area中有太多内容时，内容仍然可以放在边框上。试图让布局非常流畅，这样它就可以在任何设备上调整大小，只需将内容和菜单叠加在一起。

我也试图将content_area集中在容器中。

我认为固定在底部中心位置的nav_area始终可见于任何内容之上，这是目前唯一按计划运行的部分。

非常感谢！

这是我的HTML：

<div id="container_border">

    <!-- CONTAINER -->
    <div id="container">
        <div id="content_area">

            <div class='thumb' data-container='project1_container'>
             </div>

            <div class='thumb' data-container='project2_container'>
             </div>

            <div class='thumb' data-container='project3_container'>
             </div>

            <div class='thumb' data-container='project4_container'>
             </div>

            <div class='thumb' data-container='project5_container'>
             </div>

            <div class='thumb' data-container='project6_container'>
             </div>
        </div>
        <div id="nav_area">
            <div id="nav">
                <div class='link' data-container='a_container'><a href="#">A</a>
             </div>
             <div class='link' data-container='b_container'><a href="#">B</a>
             </div>
             <div class='link' data-container='c_container'><a href="#">C</a>
             </div>
             <div class='link' data-container='d_container'><a href="#">D</a>
             </div>

            </div>
        </div>
    </div><!-- END CONTAINER -->
    </div>

这是我的css：

* {
margin: 0;
padding: 0;
font-family: futura;
}

#container_border {
position: fixed;
height: 100%;
width: 100%;
display: block;
background: #fff;
}

#container {
position: fixed;
display: block;
top:10px;left:10px;right:10px;bottom:10px;
vertical-align: center;
background: -webkit-linear-gradient(#FDC0B1, #EAA6C9); /* For Safari */
background: -o-linear-gradient(#FDC0B1, #EAA6C9); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FDC0B1, #EAA6C9); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FDC0B1, #EAA6C9); /* Standard syntax (must be last)*/ 

}

#content_area {
position: relative;
margin: 0 auto;
display: block;
width: auto;
height: auto;
}

.link {
text-align: center;
display: inline-block;
margin-right: 15px;
margin-left: 15px;
font-size: 1.5em;
}

.thumb { 
float: left;
background-color: #ccc;
display: block;
width: 250px;
height: 250px;
margin: 30px;
}

#nav_area {
position: fixed;
clear: both;
display: block;
height: auto;
z-index: 2;
left:10px;right:10px;bottom:10px;

}

#nav {
position: relative;
font-style: italic;
height: auto;
text-align: center;
margin-bottom: 10px;
}

#nav a {
color: #381cdf;
text-decoration: none;
}

#nav a:hover {
background-color: #fff;
}

JSFiddle Example

Answer 1

我认为这就是你所追求的（如果没有，请包括图表）添加：

#container {
    overflow: hidden;
}

并将其更改为：

.thumb {
    width: 16.6%;
}

根据您的断点更改16.6%;，100 / 6。

http://jsfiddle.net/HPUb6/1/

Answer 2

我不确定你是否需要，但这就是例子：

http://jsfiddle.net/HPUb6/4/

使用display:inline-block和text-align: center将使您的拇指居中。

#content_area {
 text-align:center;
}
.thumb { 
display: inline-block;
}

我使用border对布局进行了另一项更改并删除了固定位置

Div定位为流体布局

JSFiddle Example

2 个答案: