我在侧边菜单和中间div方面遇到了麻烦

时间:2016-12-29 05:52:05

标签: html css

enter image description here

  • 当我点击主课程时,它会显示主要课程详情。

  • 当我点击汤时,它没有显示汤的详细信息 - 它已经上升。

2 个答案:

答案 0 :(得分:0)

当我点击主课程时,它会显示主课程详情。

enter image description here

但是,当我点击Soups时,它没有显示Soups Details,它就是你 enter image description here

答案 1 :(得分:-1)

            <div class="clearfix">

                    <article id="section-1"><h3 class="page-title">Soups</h3>
                    <p class="woocommerce-result-count pull-left" style="margin-right:30px;">Showing 1&ndash;9 of 11 results</p>
                    <p class="mint-products-per-page pull-left">
                        <span>View: </span>
                        <a href="javascript:void(0);">18</a> / <a href="javascript:void(0);">36</a> / <a href="javascript:void(0);">All</a> </p>

                </div>

                <div class="row">
                    <div class="product_item_wrap">
                        <div class="product_item">
                            <div class="product_img">

                                <div class="product_buttons center">

                                    <a class="wish_button" href="javascript:void(0);">Description<br>
                                    You are previewing "Paradise", a premium HTML bootstrap template that will help you design
                                    </a>
                                    <a class="zoom" href="images/products1.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
                                    <a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i>
                                    </a>

                                    </div>
                                <img src="images/products1.jpg" alt="" />
                                </div>
                            <div class="product_description center">
                                <h4 class="product_title">Striped Pants</h4>
                                <div class="price">$105.00</div>
                            </div>
                        </div>
                    </div>
                    <div class="product_item_wrap">
                        <div class="product_item">
                            <div class="product_img">
                                <div class="product_buttons center">
                                    <a class="wish_button" href="javascript:void(0);">Description<br>
                                    You are previewing "Paradise", a premium HTML bootstrap template that will help you design
                                    </a>
                                    <a class="zoom" href="images/products2.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
                                    <a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a>                                      </div>
                                <img src="images/products2.jpg" alt="" />                                   </div>
                            <div class="product_description center">
                                <h4 class="product_title"><a href="product-page.html">Cargo Pants</a></h4>
                                <div class="price">$59.00</div>
                            </div>
                        </div>
                    </div>
                    <div class="product_item_wrap">
                        <div class="product_item">
                            <div class="product_img">
                                <div class="product_buttons center">
                                    <a class="wish_button" href="javascript:void(0);">Description<br>
                                    You are previewing "Paradise", a premium HTML bootstrap template that will help you design
                                    </a>
                                    <a class="zoom" href="images/products3.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
                                    <a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a>                                      </div>
                                <img src="images/products3.jpg" alt="" />                                   </div>
                            <div class="product_description center">
                                <h4 class="product_title"><a href="product-page.html">Cargo Pants</a></h4>
                                <div class="price">$59.00</div>
                            </div>
                        </div>
                    </div>


                    <div class="product_item_wrap">
                        <div class="product_item">
                            <div class="product_img">
                                <div class="product_buttons center">
                                    <a class="wish_button" href="javascript:void(0);">Description<br>
                                    You are previewing "Paradise", a premium HTML bootstrap template that will help you design
                                    </a>
                                    <a class="zoom" href="images/products1.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
                                    <a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a>                                      </div>
                                <img src="images/products1.jpg" alt="" />                                   </div>
                            <div class="product_description center">
                                <h4 class="product_title"><a href="product-page.html">Striped Pants</a></h4>
                                <div class="price">$105.00</div>
                            </div>
                        </div>
                    </div>
                    <div class="product_item_wrap">
                        <div class="product_item">
                            <div class="product_img">
                                <div class="product_buttons center">
                                    <a class="wish_button" href="javascript:void(0);">Description<br>
                                    You are previewing "Paradise", a premium HTML bootstrap template that will help you design
                                    </a>
                                    <a class="zoom" href="images/products2.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
                                    <a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a>                                      </div>
                                <img src="images/products2.jpg" alt="" />                                   </div>
                            <div class="product_description center">
                                <h4 class="product_title"><a href="product-page.html">Cargo Pants</a></h4>
                                <div class="price">$59.00</div>
                            </div>
                        </div>
                    </div>
                    <div class="product_item_wrap">
                        <div class="product_item">
                            <div class="product_img">
                                <div class="product_buttons center">
                                    <a class="wish_button" href="javascript:void(0);">Description<br>
                                    You are previewing "Paradise", a premium HTML bootstrap template that will help you design
                                    </a>
                                    <a class="zoom" href="images/products3.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
                                    <a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a>                                      </div>
                                <img src="images/products3.jpg" alt="" />                                   </div>
                            <div class="product_description center">
                                <h4 class="product_title"><a href="product-page.html">Cargo Pants</a></h4>
                                <div class="price">$59.00</div>
                            </div>
                        </div>
                    </div>



                <div class="clear"></div>
            </div>




                <div class="clearfix">

                    <article id="section-2"><h3 class="page-title">Main Course</h3>
                    <p class="woocommerce-result-count pull-left" style="margin-right:30px;">Showing 1&ndash;9 of 11 results</p>


                </div>

                <div class="row">
                    <div class="product_item_wrap">
                        <div class="product_item">
                            <div class="product_img">

                                <div class="product_buttons center">

                                    <a class="wish_button" href="javascript:void(0);">Description<br>
                                    You are previewing "Paradise", a premium HTML bootstrap template that will help you design
                                    </a>
                                    <a class="zoom" href="images/products1.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
                                    <a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i>
                                    </a>

                                    </div>
                                <img src="images/products1.jpg" alt="" />
                                </div>
                            <div class="product_description center">
                                <h4 class="product_title">Striped Pants</h4>
                                <div class="price">$105.00</div>
                            </div>
                        </div>
                    </div>
                    <div class="product_item_wrap">
                        <div class="product_item">
                            <div class="product_img">
                                <div class="product_buttons center">
                                    <a class="wish_button" href="javascript:void(0);">Description<br>
                                    You are previewing "Paradise", a premium HTML bootstrap template that will help you design
                                    </a>
                                    <a class="zoom" href="images/products2.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
                                    <a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a>                                      </div>
                                <img src="images/products2.jpg" alt="" />                                   </div>
                            <div class="product_description center">
                                <h4 class="product_title"><a href="product-page.html">Cargo Pants</a></h4>
                                <div class="price">$59.00</div>
                            </div>
                        </div>
                    </div>
                    <div class="product_item_wrap">
                        <div class="product_item">
                            <div class="product_img">
                                <div class="product_buttons center">
                                    <a class="wish_button" href="javascript:void(0);">Description<br>
                                    You are previewing "Paradise", a premium HTML bootstrap template that will help you design
                                    </a>
                                    <a class="zoom" href="images/products3.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
                                    <a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a>                                      </div>
                                <img src="images/products3.jpg" alt="" />                                   </div>
                            <div class="product_description center">
                                <h4 class="product_title"><a href="product-page.html">Cargo Pants</a></h4>
                                <div class="price">$59.00</div>
                            </div>
                        </div>
                    </div>


                    <div class="product_item_wrap">
                        <div class="product_item">
                            <div class="product_img">
                                <div class="product_buttons center">
                                    <a class="wish_button" href="javascript:void(0);">Description<br>
                                    You are previewing "Paradise", a premium HTML bootstrap template that will help you design
                                    </a>
                                    <a class="zoom" href="images/products1.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
                                    <a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a>                                      </div>
                                <img src="images/products1.jpg" alt="" />                                   </div>
                            <div class="product_description center">
                                <h4 class="product_title"><a href="product-page.html">Striped Pants</a></h4>
                                <div class="price">$105.00</div>
                            </div>
                        </div>
                    </div>
                    <div class="product_item_wrap">
                        <div class="product_item">
                            <div class="product_img">
                                <div class="product_buttons center">
                                    <a class="wish_button" href="javascript:void(0);">Description<br>
                                    You are previewing "Paradise", a premium HTML bootstrap template that will help you design
                                    </a>
                                    <a class="zoom" href="images/products2.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
                                    <a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a>                                      </div>
                                <img src="images/products2.jpg" alt="" />                                   </div>
                            <div class="product_description center">
                                <h4 class="product_title"><a href="product-page.html">Cargo Pants</a></h4>
                                <div class="price">$59.00</div>
                            </div>
                        </div>
                    </div>
                    <div class="product_item_wrap">
                        <div class="product_item">
                            <div class="product_img">
                                <div class="product_buttons center">
                                    <a class="wish_button" href="javascript:void(0);">Description<br>
                                    You are previewing "Paradise", a premium HTML bootstrap template that will help you design
                                    </a>
                                    <a class="zoom" href="images/products3.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
                                    <a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a>                                      </div>
                                <img src="images/products3.jpg" alt="" />                                   </div>
                            <div class="product_description center">
                                <h4 class="product_title"><a href="product-page.html">Cargo Pants</a></h4>
                                <div class="price">$59.00</div>
                            </div>
                        </div>
                    </div>



                <div class="clear"></div>
            </div>

嗨这是我正在使用的代码