ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / расстояние между DIV
5 сообщений из 5, страница 1 из 1
расстояние между DIV
    #39618982
FanRammstein
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
FanRammstein
Участник
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
<div  style="height:500px; width:200px; box-sizing: border-box; text-align: center;">
	<div style="border:2px solid green; height:50px; width:100px; float:left;box-sizing: border-box; ">
		1
	</div>
	<div style="border:2px solid red; height:100px; width:100px; float:left;box-sizing: border-box; ">
		2
	</div>
	<div style="border:2px solid red; height:100px; width:100px; float:left;box-sizing: border-box; ">
		3
	</div>
	<div style="border:2px solid blue; height:50px; width:100px; float:left;box-sizing: border-box; ">
		4
	</div>
	<div style="border:2px solid red; height:100px; width:100px; float:left;box-sizing: border-box; ">
		5
	</div>
	<div style="border:2px solid red; height:100px; width:100px; float:left;box-sizing: border-box; ">
		6
	</div>
</div>



Добрый день.
Имеется простой код, но не могу понять почему остается пустое пространство между блоками 1, 3, 6. Тыкните носом что необходимо сделать чтобы убрать эту постоту.
Заранее спасибо.
...
Рейтинг: 0 / 0
22.03.2018, 15:32
| Ответить | Цитировать | Написать  
расстояние между DIV
    #39618989
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
100px между началом блока 1 и началом блока 3, а высота блока 1 указана как 50px.
150px между началом блока 3 и началом блока 6, а высота блока 3 указана как 100px.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
<div  style="height:500px; width:200px; box-sizing: border-box; text-align: center;">
	<div style="border:2px solid green; height:50px; width:100px; float:left;box-sizing: border-box; ">
		1
	</div>
	<div style="border:2px solid red; height:100px; width:100px; float:left;box-sizing: border-box; ">
		2
	</div>
	<div style="border:2px solid red; height:100px; width:100px; float:left;box-sizing: border-box; ">
		3
	</div>
	<div style="border:2px solid blue; height:50px; width:100px; float:left;box-sizing: border-box; ">
		4
	</div>
	<div style="border:2px solid red; height:100px; width:100px; float:left;box-sizing: border-box; ">
		5
	</div>
	<div style="border:2px solid red; height:100px; width:100px; float:left;box-sizing: border-box; ">
		6
	</div>
</div>
...
Рейтинг: 0 / 0
22.03.2018, 15:42
| Ответить | Цитировать | Написать  
расстояние между DIV
    #39619015
FanRammstein
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
FanRammstein
Участник
Наверное нужно было сказать что высота блоков разная специально.
А так решение вроде как найдено.
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
<script src="https://masonry.desandro.com/masonry.pkgd.min.js"></script>
<div  style="height:500px; width:200px; box-sizing: border-box; text-align: center;" 
	id="container" class="js-masonry" data-masonry-options='{ "columnHeight": 0, "itemSelector": ".item" }'>
	<div style="border:2px solid green; height:50px; width:100px; float:left;box-sizing: border-box; " class="item">
		1
	</div>
	<div style="border:2px solid red; height:100px; width:100px; float:left;box-sizing: border-box; " class="item">
		2
	</div>
	<div style="border:2px solid red; height:100px; width:100px; float:left;box-sizing: border-box; " class="item">
		3
	</div>
	<div style="border:2px solid blue; height:50px; width:100px; float:left;box-sizing: border-box; " class="item">
		4
	</div>
</div>
...
Рейтинг: 0 / 0
22.03.2018, 16:04
| Ответить | Цитировать | Написать  
расстояние между DIV
    #39619054
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
FanRammsteinНаверное нужно было сказать что высота блоков разная специально.На мой взгляд нужно было описать задачу, а не показать решение не понятно чего

FanRammsteinА так решение вроде как найдено.Скрипт, что Вы подключили, тупо абсолютно позиционирует блоки на странице.

Если бы Вы описали задачу, то Вам бы сразу что-то подобное и посоветовали.
...
Рейтинг: 0 / 0
22.03.2018, 17:15
| Ответить | Цитировать | Написать  
расстояние между DIV
    #39619756
FanRammstein
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
FanRammstein
Участник
Однозначно мой косяк, я даже не спорю.

Может кто что подскажет как поправить.

Имеется так сказать главная страница (div_block.php)
 

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
<html>
<head>
	<title>Пример блочной верстки</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<link rel="stylesheet" href="tips_style.css">
	<script src="https://masonry.desandro.com/masonry.pkgd.min.js"></script>
	<script src="https://unpkg.com/isotope-layout@3.0.5/dist/isotope.pkgd.min.js"></script>
	<style type="text/css">

</style>
</head>
<body>	
<!--<div id="block">-->
	<!-- Верхняя часть -->
	<div class="header"><h1 align="center">header</h1></div>
	<!-- Левая часть -->
	<div class="left_col">
	<p align="center">left_col</p>
	</div>
	<!-- Средняя часть -->
	<div class="right_col">
		<div style="width:70%;height:100%; border: 2px solid Gray; box-sizing: border-box; float:left;">
			<input type="button" value="ЖМЯК" class="add" ></input>
		</div>
		<div style="width:30%;height:100%; border: 2px solid Black; box-sizing: border-box; float:left; overflow:auto;">
			<div align="center" valign="center" style="width:100%;height:5%;border: 2px solid Black; box-sizing: border-box; float:bottom; font-size:30px"> 
				Подсказки <span class="count_tips">0</span>
			</div>
			<div class="all_tips" >
				
			</div>
		</div>
	</div>	
	<!-- Нижняя часть -->
	<div class="footer"><h2 align="center">footer</h2></div>
<!--</div>-->


<script>

	
$(document).ready(function(){
	var $grid = $('.all_tips').isotope({
	  itemSelector: '.t',
	  columnHeight: 1,
	  layoutMode: 'fitRows',
	  masonry: {
		columnWidth: 1
		},
	  getSortData: {
		prt: '.priotity'
	  }
	});
	
	$(".add").click(function(){
		$.ajax
		(
			{
				url: "tips.php",
				success: function(html)
				{
					/* Получение рандомного цвета */
					var colorR = Math.floor((Math.random() * 256));
					var colorG = Math.floor((Math.random() * 256));
					var colorB = Math.floor((Math.random() * 256));
					/* Присваивание цвета к кол-во подсказок */
					$(".count_tips").css("background-color", "rgb(" + colorR + "," + colorG + "," + colorB + ")");
					/* Изменение кол-ва подсказок*/
					$(".count_tips").text((parseInt($(".count_tips").text())+1));
					/*Добавление нового элемента */
					$(".all_tips").append(html);	
					$grid.isotope('reloadItems').isotope();
					$grid.isotope({ sortBy: 'prt' });
				}
			}
		);
	});
	
	$(".btn_tips").live('click', function(){
		var curr_text_tips = $(this).parent().parent().find('.text_tips');
		var curr_btn_tips = $(this).parent().parent().find('.btn_tips');
		var startHeight = 50;
		var textbtm = 'Развернуть';
		
		if(curr_btn_tips.text().trim() == 'Развернуть')
		{
			var curHe = curr_text_tips.height();
			var autoH = curr_text_tips.css('height','auto').height();
			curr_text_tips.css('height',curHe);
			startHeight = autoH;
			var textbtm = 'Свернуть';
		};
		curr_btn_tips.text(textbtm) ;
		curr_text_tips.animate({height:startHeight}, 400, 
				function()
				{
					$grid.isotope('reloadItems').isotope();
					$grid.isotope({ sortBy: 'prt' });
				}
			);
	});
	
});
</script>
</body>
</html>




Страница используемая для загрузки AJAX (tips.php)
 

Код: php
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
<?php
$a = rand(1, 3);
$pri;
$color;
switch ($a) 
{
    case 1:
		$pri=1;
		$color = '#ff3333';
        break;
    case 2:
		$pri=2;
		$color = '#ffff66';
        break;
    case 3:	
		$pri=3;
		$color = '#66ff66';
        break;
}
?>
<div class="t">
	<div class="header_tips" style="background-color: <?=$color;?>;">
		<p class="priotity" style="display:none"><?= $pri; ?></p>
		<?= generateRandomString(5);?>
	</div>
	<div class="text_tips">
		<?= generateRandomString(10);?>
	</div>
	<div class="button_tips">
		<button class="btn_tips"> Развернуть </button>
	</div>
</div>

<?php
function generateRandomString($length = 10) {
	if($length ==10)
	{
		$length = rand(10, 500);
	}
	elseif ($length == 5)
	{
		$length = rand(10, 25);
	}
    $characters = '012345678 9abcdefghijklm nopqrstuv wxyzABCDEF GHIJKLMNOPQRST UVWX YZ';
    $charactersLength = strlen($characters);
    $randomString = '';
    for ($i = 0; $i < $length; $i++) {
        $randomString .= $characters[rand(0, $charactersLength - 1)];
    }
    return $randomString;
}
?>




Так же файл стилей (tips_style.css)
 

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
.t
{
	float:left;
	width:50%;
	box-sizing: border-box;
	border: 2px solid #668cff;	
}
.header_tips
{
	height:38px;
	width:100%;
	border: 2px solid #668cff; 
	box-sizing: border-box; 
	overflow:auto;
	text-align:center;
}

.text_tips
{
	width:100%;
	height:76px;
	overflow:auto;
}
.button_tips
{
	width:100%;
	height:38px;
	border:2px solid blue; 
	box-sizing: border-box; 
	text-align:right;
}
.btn_tips
{
	height:100%;
	width:30%;
}
.all_tips
{
	width:100%;
	height:95%;
	overflow:auto;
}
.block 
{
	width:100%;
	margin:0 auto; 
}
.header 
{
	width:100%; 
	height:10%; 
	border: 2px solid red;
	box-sizing: border-box;
}
.left_col
{
	width:10%; 
	height:80%;
	float:left; 
	border: 2px solid green;
	box-sizing: border-box;
}
.right_col 
{
	width:90%; 
	height:80%; 
	float:left; 
	border: 2px solid blue;
	box-sizing: border-box;
}
.footer 
{
	width:100%; 
	height:10%; 
	clear:both;
	border: 2px solid red;
	box-sizing: border-box;
}
.add
{
	width:25%; 
	height:50%;
	background-color:#ffff80
}




Принцип работы
html разделен на блоки, в один из блоков по нажатию кнопки загружеться <div> средствами AJAX после чего происходит сортировка по полю с классом "priotity" (блок с классом возвращается AJAX), тут все хорошо.
Но в блоке возвращаемом AJAX есть кнопка которая растягивает div, после растяжения появляются неприятные просветы, которые я ни как не могу убрать.

Естественно код кривой, но если кто-то подскажет как поправить буду благодарен.
...
Рейтинг: 0 / 0
23.03.2018, 17:59
| Ответить | Цитировать | Написать  
5 сообщений из 5, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / расстояние между DIV
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39618982&tid=1444235]:
 0ms
get settings:
 10ms
get forum list:
 15ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 171ms
get topic data:
 14ms
get forum data:
 3ms
get page messages:
 56ms
get tp. blocked users:
 2ms
others: 15ms
total:  294ms
созд. / загр.: 294ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]