Показать сообщение отдельно
  #4 (permalink)  
Старый 27.02.2015, 09:49
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

FanAizu, похоже на твою картинку?


<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
.container {
	margin: 10px;
	border: 1px solid;
}
.item {
	margin: 10px;
	padding-bottom: 10px;
	overflow: hidden;
	border-bottom: 2px solid;
}
.item > div {
	/* вот эту величину нужно синхронизировать */
	width: 500px;
}
.item .box {
	float: left;
	width: 60%;
	height: 30px;
	margin-top: 10px;
	border: 1px solid;
}
.item select {
	margin-top: 15px;
	margin-left: 10px;
}
.list {
	max-height: 100px;
	overflow: auto;
}
.list > .item {
	border-bottom: 1px solid;
}
.list > .item:last-child {
	border-bottom: 0;
}
.list > .item .box {
	background-color: silver;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class='container'>
	<div class='item'>
		<div>
			<div class='box'></div>
			<select>
				<option>default</option>
			</select>
		</div>
	</div>
	<div class='list'>
		<div class='item'>
			<div>
				<div class='box'></div>
				<select>
					<option>default</option>
				</select>
			</div>
		</div>
		<div class='item'>
			<div>
				<div class='box'></div>
				<select>
					<option>default</option>
				</select>
			</div>
		</div>
		<div class='item'>
			<div>
				<div class='box'></div>
				<select>
					<option>default</option>
				</select>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Если у элементов нет фиксированного размера, придется скриптом вычислять циферку (где комментарий)...
Ответить с цитированием