mirror of
				https://github.com/flynx/ImageGrid.git
				synced 2025-10-31 03:10:07 +00:00 
			
		
		
		
	removed a ribbon width limitation...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
		
							parent
							
								
									bea0596b9c
								
							
						
					
					
						commit
						1709fa053b
					
				
							
								
								
									
										50
									
								
								ui/experiments/horisontal-stretch.html
									
									
									
									
									
										Executable file
									
								
							
							
						
						
									
										50
									
								
								ui/experiments/horisontal-stretch.html
									
									
									
									
									
										Executable file
									
								
							| @ -0,0 +1,50 @@ | ||||
| <script src="../jquery.js"></script> | ||||
| 
 | ||||
| <style> | ||||
| 
 | ||||
| .field { | ||||
| 	width: auto; | ||||
| 	overflow: visible; | ||||
| } | ||||
| 
 | ||||
| .ribbon { | ||||
| 	padding: 10px; | ||||
| 	height: 100px; | ||||
| 
 | ||||
| 	width: auto; | ||||
| 	overflow: visible; | ||||
| 	white-space: nowrap; | ||||
| 	font-size: 0px; | ||||
| } | ||||
| 
 | ||||
| .image { | ||||
| 	display: inline-block; | ||||
| 	height: 80px; | ||||
| 	width: 80px; | ||||
| 	background: silver; | ||||
| } | ||||
| 
 | ||||
| </style> | ||||
| 
 | ||||
| <div class="field"> | ||||
| 	<div class="ribbon"> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 		<div class="image"></div> | ||||
| 	</div> | ||||
| </div> | ||||
| @ -100,7 +100,6 @@ | ||||
| } | ||||
| 
 | ||||
| .options .value { | ||||
| 	/*float: right;*/ | ||||
| 	position: absolute; | ||||
| 	right: 20px; | ||||
| 	bottom: 10px; | ||||
| @ -116,7 +115,7 @@ | ||||
| } | ||||
| 
 | ||||
| .image { | ||||
| 	float: left; | ||||
| 	display: inline-block; | ||||
| 
 | ||||
| 	background: no-repeat 50% black; | ||||
| 	background-size: contain; | ||||
| @ -304,9 +303,11 @@ | ||||
| 
 | ||||
| .ribbon { | ||||
| 	height: 360px; | ||||
| 	/* XXX make this expand dynamically */ | ||||
| 	width: 100000px; | ||||
| 	width: auto; | ||||
| 	overflow: visible; | ||||
| 	white-space: nowrap; | ||||
| 	word-spacing: 0px; | ||||
| 	font-size: 0px; | ||||
| 	padding-top: 2px; | ||||
| 	padding-bottom: 2px; | ||||
| 	opacity: 0.5; | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user