이미지 갤러리 정렬 문제

debugcn 에 게시 Dev

thedivkiller

누군가 다음 이미지 갤러리로 나를 도울 수 있습니까?

컨테이너 내부의 모든 항목을 너비 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 { 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/

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-14

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

이미지 갤러리 정렬 문제

이미지 갤러리 정렬 문제

이미지 갤러리 문제 jquery

반응 형 이미지 갤러리를 부모의 높이로 강제 설정

반응 형 이미지 갤러리를 부모의 높이로 강제 설정

Android 이미지 갤러리 및 조각 문제

이미지 갤러리 / 플로트 문제

가로 스크롤 갤러리의 정렬 문제

갤러리 축소판 이미지를 날짜별로 정렬하는 방법

Keystone.js에 설명이있는 갤러리 이미지 표시 문제

섹션이나 그림 안의 이미지 갤러리 제목?

Android : 이미지를 갤러리에 저장하는 동안 해결 문제

MYSQL / PHP / JQUERY-이미지 갤러리에 블롭, 문제 해결 방법?

갤러리에서 이미지를 가져와 base64 문제로 변환

사용자 정의 이미지 뷰어. 복제 한 후 표시되지 않는 간단한 이미지 갤러리, 이상한 행동

WooCommerce : 제품 갤러리에 추가 이미지 추가

맨 오른쪽 갤러리 이미지에서 여백 제거

갤러리에서 전화 배경 이미지 설정

갤러리에서 선택한 이미지 크기 조정

마지막 갤러리 행 왼쪽 정렬

HTML 이미지 갤러리

양쪽 정렬 된 갤러리 레이아웃에서 이미지 중간의 가운데 아이콘

WP 갤러리 기능에서 갤러리 블록이 깨지거나 녹아 내림 (Safari 및 Chrome 문제)

갤러리 플러그인으로 대체 된 Woocommerce 제품 이미지

슈퍼 기본 jquery 갤러리-이전 버튼 작동 문제

커스텀 필드 이미지를 제품 갤러리 Woocommerce로 이동

특정 이름을 가진 마젠 토로 된 제품의 모든 갤러리 이미지를 얻으려면 어떻게해야합니까?

CSS 이미지 갤러리에서 균일 한 상자 높이 설정

Wordpress 갤러리 문제

사용자 지정 이미지 크기에 연결되는 WordPress 사용자 지정 이미지 갤러리

갤러리에서 Cordova ionic의 이미지 업로드 문제. 선택 취소 오류