html - 图片库对齐问题

标签 html css

有人可以帮我处理以下图片库吗？ enter image description here

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

最佳答案

如果您希望图库内容扩展到 940px 大小，您需要将以下代码行更新为 max-width: 940px:

  • .content { 背景:#fff;向左飘浮;最大宽度:740px；顶部边距:21px；溢出:隐藏；框阴影:0 0 10px #99997a； }

不过这只会稍微解决尺寸问题。到那时，您将遇到边距问题和基于您的标签 floats 和代码为每个 DIV 定义的 widths 的元素分割

我对您的代码做了一些小改动，并添加了来自 placehold.it 的一些图片。试试看我是否得到你要找的东西。看看下面的链接，让我知道。

关于html - 图片库对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40332288/

上一篇：html - 如何使每个区域的背景透明而不是HTML中的内容

下一篇：javascript - 如何在点击面板前后添加新面板

相关文章：

css - 为显示 : none? 的元素设置动画

javascript - HTML5 - Canvas ，drawImage() 绘制图像模糊

Javascript:选中复选框时启用复选框列表(带原型(prototype))

javascript - 删除类而不影响具有相同类的其他 div

css - 使用样式组件创建变体的方法

javascript - 在网页上如何显示在悬停时更改为下拉框的标签

css - 第一项的多列问题

html - 如何在 Django 中禁用调整文本区域的大小？

.net - 在数据库中保存格式化文本的有意义的格式是什么？

html - Bootstrap div- 对齐页面中心

©2024 IT工具网  联系我们