如何创建一个简单的响应布局与导航和图片库

Question

我的代码有问题。我的任务是创建一个图像画廊，是响应。我在CSS方面也不够好。我搜索了另一个教程，并将其应用于我的代码。我正在创建产品的4列图像画廊。在画廊旁边是一个简单的导航菜单。所以有两列。一个是侧边栏，第二个是画廊。下面是我的示例代码。

在我的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/

小提琴来了

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