Работа с div и float

@maximillian77 · Регистрация: 07.07.2014

Студворк — интернет-сервис помощи студентам

Добрый день! Подскажите пожалуйста, сделал вывод блоков через float-left, но такая проблема, что если у верхнего дива высота больше чем у остальных, то под ним див застряёт, а мне нужно, когда ширина родителя допустим уже не позволяет добавлять новый див, див шёл всегда с начала строки и на застрявал.

@Karssen · 02.08.2015, 18:45

Хотя бы код показали. Так чисто теоритически можно задать блокам внутри родителя width:25% а для div:nth-child(4):after{clear:both; content:''; display:block; width:100%}.

@maximillian77 · 02.08.2015, 18:54 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class='vertical'>
  <div>some info</div>
  <div>some info</div>
  <div>some info</div>
</div>
 
.vertical {
    float:left;
    width:30%;
    margin:3px;
}

@Fedor92 · 02.08.2015, 19:15

maximillian77, смотрите тему...

@maximillian77 · 02.08.2015, 19:18 **[ТС]**

Karssen, у меня простой код. Можете пожалуйста подсказать, как граммотно сделать, что бы такого не было как на картинке ..

@ns16 · 02.08.2015, 20:32

Вместо float: left для блоков попробуйте использовать display: inline-block.
Пример:

HTML5
1
2
3
4
5
6
7
8
<div class='vertical'>
    <div>some info</div>
    <div>some info</div>
    <div style="height: 120px">some info</div>
    <div>some info</div>
    <div>some info</div>
    <div>some info</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.vertical {
    float: left;
    width: 30%;
    margin: 3px;
    font-size: 0;
}
.vertical > div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: silver;
    margin: 15px;
    font-size: 16px;
}

@Karssen · 02.08.2015, 20:39

Это по разному можно сделать. Тут надо поглядеть код именно с тем чем вы его наполняете. Можно задать блокам фиксированную высоту. Можно сделать обертку допустим для 4 блоков в ряд и внутри этой обертки задать дивам width:25%. И дублировать потом эту обертку с дивами внутри. Можно использовать новое свойство css display:flex. Можно сделать их строчно блочными. Тогда они будут работать так как вы хотите, там не надо задавать ширину, блоки просто буду спадать вниз при уменьшении экрана. так например:

HTML5
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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery</title>
  <script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
 
</script>
<style>
.vertical {
    margin:3px;
    display:inline-block;
} 
.vertical:nth-child(odd){
    background-color: #fee;
}  
</style>
</head>
<body>
<div class='vertical'>
  <div>some info</div>
  <div>some info</div>
  <div>some info</div>
</div>
<div class='vertical'>
  <div>some info</div>
  <div>some info</div>
  <div>some info</div>
   <div>some info</div>  <div>some info</div>  <div>some info</div>  <div>some info</div>
</div>
<div class='vertical'>
  <div>some info</div>
  <div>some info</div>
  <div>some info</div>
</div>
<div class='vertical'>
  <div>some info</div>
  <div>some info</div>
  <div>some info</div>
</div>
<div class='vertical'>
  <div>some info</div>
  <div>some info</div>
  <div>some info</div>
   <div>some info</div>  <div>some info</div>  <div>some info</div>  <div>some info</div>
</div>
<div class='vertical'>
  <div>some info</div>
  <div>some info</div>
  <div>some info</div>
</div>
<div class='vertical'>
  <div>some info</div>
  <div>some info</div>
  <div>some info</div>
</div>
</body>
</html>

Но тут они выравниваются по нижнему краю)

@maximillian77 · 02.08.2015, 21:01 **[ТС]**

Karssen,ns16 спасибо, буду разбираться почему не ровно получилось ..

@ns16 · 02.08.2015, 21:11

Если вы хотите выровнять блоки по верхнему краю, добавьте в правило vertical-align: top.

@Karssen · 03.08.2015, 02:21

Если подключен JQuery можно еще так сделать. Но тогда у всех блоков будет высота максимального блока.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function() {
 function setEqualHeight(columns)
 {
 var tallestcolumn = 0;
 columns.each(
 function()
 {
 currentHeight = $(this).height();
 if(currentHeight > tallestcolumn)
 {
 tallestcolumn  = currentHeight;
 }
 }
 );
 columns.height(tallestcolumn);
 }
 setEqualHeight($(".vertical"));
});

@maximillian77 · 03.08.2015, 19:37 **[ТС]**

Karssen,ns16, спасибо Вам, очень помогли !

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@maximillian77 5 / 5 / 5 Регистрация: 07.07.2014 Сообщений: 559

	Работа с div и float 02.08.2015, 18:28. Показов 795. Ответов 10 Метки нет (Все метки) Добрый день! Подскажите пожалуйста, сделал вывод блоков через float-left, но такая проблема, что если у верхнего дива высота больше чем у остальных, то под ним див застряёт, а мне нужно, когда ширина родителя допустим уже не позволяет добавлять новый див, див шёл всегда с начала строки и на застрявал. 0

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	02.08.2015, 18:45
	Хотя бы код показали. Так чисто теоритически можно задать блокам внутри родителя width:25% а для div:nth-child(4):after{clear:both; content:''; display:block; width:100%}. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	02.08.2015, 19:15
	maximillian77, смотрите тему... 0

@maximillian77 5 / 5 / 5 Регистрация: 07.07.2014 Сообщений: 559
	02.08.2015, 19:18 [ТС]
	Karssen, у меня простой код. Можете пожалуйста подсказать, как граммотно сделать, что бы такого не было как на картинке .. 0

@maximillian77 5 / 5 / 5 Регистрация: 07.07.2014 Сообщений: 559
	02.08.2015, 21:01 [ТС]
	Karssen,ns16 спасибо, буду разбираться почему не ровно получилось .. 0

@ns16 94 / 94 / 68 Регистрация: 26.03.2015 Сообщений: 248
	02.08.2015, 21:11
	Если вы хотите выровнять блоки по верхнему краю, добавьте в правило vertical-align: top. 1

@maximillian77 5 / 5 / 5 Регистрация: 07.07.2014 Сообщений: 559
	03.08.2015, 19:37 [ТС]
	Karssen,ns16, спасибо Вам, очень помогли ! 0