html - 如何使用导航和图片库创建简单的响应式布局？

Question

我的代码有问题。我的任务是创建一个响应式图片库。而且我的 CSS 不够好。我搜索其他教程并将其应用到我的代码中。我正在创建一个 4 列的产品图片库。在画廊旁边是一个简单的导航菜单。所以我有 2 列。一个是侧边栏，第二个是画廊。这是我的示例代码。

在我的 CSS 中我有这个

.menu_navigation {

    position: relative;
    float: left;
    width: 20%;
    height: 100%;
    border-style: solid;
    border-color: red;
    border-width: 2px;
}

.product_selection: {

    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    padding: 10px;
    color: #000000;

} 

.product_image {
    height: 100;
    width: 100;
}

#wrap {
    overflow: hidden;
    margin: 10px;
}

.box {
    width: 20%;
    padding-left: 10%;
    padding-bottom: 30%;
    color: #FFF;
    position: relative;
    float: left;
}

.innerContent {
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    background: #FFF;
    padding: 5px;

}

在我的 HTML 中我有这个

<div class="page" id="wrap">

<!-- navigation categories -->
<div class="menu_navigation">

    <ul class="menu" style="padding: 10px">
        <li>
            <a href="">DISPLAY FORMAT</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />USUAL</a></li>
                <li><a><input type="checkbox" />SMALL</a></li>
                <li><a><input type="checkbox" />SHADED</a></li>
                <li><a><input type="checkbox" />SHIRT</a></li>
            </ul>
        </li>
        <li>
            <a href="">COLOR</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />BLACK</a></li>
                <li><a><input type="checkbox" />WHITE</a></li>
                <li><a><input type="checkbox" />BLUE</a></li>
                <li><a><input type="checkbox" />BROWN</a></li>
                <li><a><input type="checkbox" />GREEN</a></li>
                <li><a><input type="checkbox" />RED</a></li>
             </ul>
        </li>
        <li>
            <a href="">PATTERN</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />USUAL</a></li>
                <li><a><input type="checkbox" />SMALL</a></li>
                <li><a><input type="checkbox" />SHADED</a></li>
                <li><a><input type="checkbox" />SHIRT</a></li>
            </ul>
        </li>
        <li>
            <a href="">PRICE</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />$49</a></li>
                <li><a><input type="checkbox" />$59</a></li>
                <li><a><input type="checkbox" />$69</a></li>
                <li><a><input type="checkbox" />$79</a></li>
                <li><a><input type="checkbox" />$89</a></li>
            </ul>
        </li>
        <li>
            <a href="">BRAND</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />CANCLINI</a></li>
                <li><a><input type="checkbox" />FINEST ORIGINAL FABRICS</a></li>
                <li><a><input type="checkbox" />T. MASON</a></li>
            </ul>
        </li>
        <li>
            <a href="">TYPE OF PATTERN</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />OXFORD</a></li>
                <li><a><input type="checkbox" />DOBBY</a></li>
                <li><a><input type="checkbox" />DOBBY STRIPE</a></li>
                <li><a><input type="checkbox" />PINPOINT OX</a></li>
                <li><a><input type="checkbox" />OTHERS</a></li>
            </ul>
        </li>
    </ul>

</div>

<!-- /navigation categories -->

<!-- product -->

<div class="product_selection">

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
            <div class="item_label">#</div>
            <div class="item_value">1-KK00</div>
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" /> 
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

</div>

</div> 

这是示例结果

http://jsfiddle.net/rochellecanale/2jrvL/embedded/result/

这是 fiddle

http://jsfiddle.net/rochellecanale/2jrvL/

图库应该只有 4 列。就这些了，我希望你们能帮助我。

Answer 1

@Jerielle，在这里你可以使用CSS3中引入的媒体查询。

请通过以下链接获得在 CSS 文件中应用 CSS 的基本想法。

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

http://foundation.zurb.com/docs/media-queries.html