圖片庫對齊問題

Question

有人可以幫助我與以下圖片庫？

我想對齊容器內的所有項目寬度940px和畫廊div是740，但我無法弄清楚技術，並做到正確。請問一些更有經驗的人向我解釋如何構建代碼並以適當的方式進行操作？

這裏是我的代碼，直到這一刻，但幾乎所有的東西被打破......

.container { position: relative; width: 940px; margin: 0 auto; } 
 
.main { background: #f1f1e6; position: relative; } 
 
.sidebar { display: block; width: 182px; float: left; padding: 41px 10px 10px 19px; } 
 
.content { background: #fff; float: left; max-width: 740px; margin-top: 21px; overflow: hidden; box-shadow: 0 0 10px #99997a; } 
 
.cf-me { clear: both; } 
 

 
/* Content CSS Styles */ 
 

 
.sort-container { position: relative; left: 42.5%; } 
 
.sort-items { position: relative; float: left; margin-top: 52px; } 
 
.sort-items p { float: left; padding: 0 4px; } 
 
.filter-products { position: absolute; left: 100%; font-size: 12px; line-height: 18px; color: #666651; background: #f2f2e7; border: 1px solid #e6e6cf; border-radius: 1px; padding: 2px 0; width: 160px; } 
 

 
.product-label { display: block; float: left; } 
 
.product-label h1 { position: relative; font-family: "Arial", sans-serif; font-size: 12px; font-weight: bold; padding: 15px 10px 16px 20px; } 
 
.product-label h1:after { content:''; position: absolute; top: 0; border-bottom: 1px solid #e6e6cf; } 
 
.product-label p { padding: 0 5px 15px 20px; } 
 

 
.product-list { clear: both; } 
 
.product-list ul { margin-right: -240px; } 
 
.product-list ul li { list-style: none; float: left; width: 144px; margin: 0 48px 7px 50px; } 
 
.product-list ul li img { max-width: 100%; height: auto; } 
 
.product-list ul li a { color: #fff; } 
 
.product-list ul li a:hover { opacity: 0.8; } 
 

 
.btn { background: url(../images/btn-image.jpg) 0 0 no-repeat; } 
 
.add-to-cart { font-family: "Arial", sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; padding: 9px 33px 10px 9px; } 
 

 
.left-arrow { float: left; width: 24px; height: 126px; } 
 
.left-arrow a { display: block; height: 100%; background: url(../images/arrow.png) no-repeat 0 0; font-size: 0; line-height: 0; font-style: normal; overflow: hidden; text-indent: -100%; }

\t <main class="main"> 
 
\t <div class="paper-border"></div> 
 
\t \t <div class="container"> 
 
\t \t \t <aside class="sidebar"> 
 
\t \t \t \t 
 
\t \t \t </aside><!-- sidebar --> 
 
\t \t \t <div class="content"> 
 
\t \t \t \t <div class="product-label"> 
 
\t \t \t \t \t <h1>Products > Category Page</h1> 
 
\t \t \t \t \t <p>Displaying 1-12 of 30 Product(s)</p> 
 
\t \t \t \t </div><!-- product-label --> 
 
\t \t \t \t <div class="sort-container"> 
 
\t \t \t \t \t <div class="sort-items"> 
 
\t \t \t \t \t \t <p>Sort By:</p> 
 
\t \t \t \t \t \t <select class="filter-products"> 
 
\t \t \t \t \t \t \t <option value="default" selected>Default</option> 
 
\t \t \t \t \t \t \t <option value="product_1">Product 1</option> 
 
\t \t \t \t \t \t \t <option value="product_2">Product 2</option> 
 
\t \t \t \t \t \t \t <option value="product_3">Product 3</option> 
 
\t \t \t \t \t \t </select><!-- filter-products --> 
 
\t \t \t \t \t </div><!-- sort-items --> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="product-list"> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="left-arrow"> 
 
\t \t \t \t \t \t \t \t <a href="#">left arrow</a> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#" class="image"><img src="images/product_1.jpg" width="110" height="121" title="someText" alt="someText"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Product Title<br>Placeholder</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;99.99</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn add-to-cart">Add to Cart</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#" class="image"><img src="images/product_2.jpg" width="138" height="87" title="someText" alt="someText"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Product Title<br>Placeholder</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;99.99</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn add-to-cart">Add to Cart</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#" class="image"><img src="images/product_3.jpg" width="139" height="87" title="someText" alt="someText"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Product Title<br>Placeholder</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;99.99</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn add-to-cart">Add to Cart</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#" class="image"><img src="images/product_4.jpg" width="160" height="160" title="someText" alt="someText"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Product Title<br>Placeholder</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;99.99</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn add-to-cart">Add to Cart</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="left-arrow"> 
 
\t \t \t \t \t \t \t \t <a href="#">left arrow</a> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#" class="image"><img src="images/product_5.jpg" width="123" height="136" title="someText" alt="someText"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Product Title<br>Placeholder</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;99.99</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn add-to-cart">Add to Cart</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#" class="image"><img src="images/product_6.jpg" width="114" height="138" title="someText" alt="someText"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Product Title<br>Placeholder</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;99.99</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn add-to-cart">Add to Cart</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#" class="image"><img src="images/product_7.jpg" width="127" height="133" title="someText" alt="someText"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Product Title<br>Placeholder</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;99.99</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn add-to-cart">Add to Cart</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#" class="image"><img src="images/product_8.jpg" width="123" height="135" title="someText" alt="someText"></a> 
 
\t \t \t \t \t \t \t \t <p class="title"Product Title<br>Placeholder</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;99.99</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn add-to-cart">Add to Cart</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li class="cf-me"> 
 
\t \t \t \t \t \t \t <div class="left-arrow"> 
 
\t \t \t \t \t \t \t \t <a href="#">left arrow</a> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#" class="image"><img src="images/product_9.jpg" width="142" height="135" title="someText" alt="someText"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Product Title<br>Placeholder</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;99.99</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn add-to-cart">Add to Cart</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#" class="image"><img src="images/product_10.jpg" width="75" height="140" title="someText" alt="someText"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Product Title<br>Placeholder</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;99.99</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn add-to-cart">Add to Cart</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#" class="image"><img src="images/product_11.jpg" width="75" height="129" title="someText" alt="someText"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Product Title<br>Placeholder</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;99.99</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn add-to-cart">Add to Cart</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#" class="image"><img src="images/product_12.jpg" width="136" height="122" title="someText" alt="someText"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Product Title<br>Placeholder</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;99.99</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn add-to-cart">Add to Cart</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t </div><!-- content --> 
 
\t \t </div><!-- container -->

Answer 1

如果你想在庫內容向外膨脹到940px大小，您需要更新下面的代碼行max-width: 940px：

• .content { background: #fff; float: left; max-width: 740px; margin-top: 21px; overflow: hidden; box-shadow: 0 0 10px #99997a; }

這隻會解決大小問題。在這一點上，你將有保證金的問題，並根據您的標籤floats和元素的擊穿widths的代碼定義了每個DIV

我做你的代碼的一些光修修補補，並在一些圖像添加從placehold.it嘗試看看我有沒有找到你想要的東西。看看下面的鏈接，讓我知道。

• https://jsfiddle.net/jdcutter/cwmf6fab/