Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
20 / 13 / 8
Регистрация: 20.02.2019
Сообщений: 111
1

Сетка GRID, проблема с классами внутри элемента GRID

21.06.2020, 19:45. Показов 960. Ответов 4

Создал сетку GRID и столкнулся с проблемой при создании в элементе GRID блока с классом.

1) Когда внутри блока GRID создаю еще один блок с классом, то он выводится на экран т. е.
внутри блока есть несколько тегов html5, и когда я им задаю какой либо класс то он транслируется на экран, допустим
class="button" и слово button выводится на экран, если задать id для тэга то проблема исчезает, но у меня много блоков и мне нужно использовать классы, так я хочу реализовать кое что на JS.(скрыть показать блок под блоком GRID).

Помогите! Спасибо!
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.06.2020, 19:45
Ответы с готовыми решениями:

Работа с grid, сетка
В данный момент есть 2 блока, левый и правый, в них дочерние блоки. Задача в том, чтобы убрать...

Возможно ли задать в XAML число строк и столбцов Grid сразу, без исп <Grid.ColumnDefinitions> и <Grid.RowDefinnitions>?
Возможно ли задать в XAML число строк и столбцов Grid сразу, без исп &lt;Grid.ColumnDefinitions&gt; и...

В стиле для элемента Grid использовать другой Grid
Пытаюсь создать вот такой стиль для Grid &lt;Style x:Key=&quot;CrosswalkHorizontal&quot;...

grid-template-rows, сетка, минимальная высота
grid-template-columns: repeat(auto-fit, minmax(700px, 1fr)); ок, тогда как быть ...

4
899 / 832 / 197
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
21.06.2020, 20:02 2
Demolition_Man, нужен код.
0
20 / 13 / 8
Регистрация: 20.02.2019
Сообщений: 111
21.06.2020, 20:20  [ТС] 3
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
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style_books.css">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
$(document).ready(function () {
    
$(".book__item").click(function () {
    // все закрываем
    $(".book__review").slideUp(200);
    // следующий открываем
       $(this).next('.book__review').slideDown(200);
   }); //click           
});// end ready
</script>
    <title>Books</title>
</head>
<style>
body {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1;
    color: #000;
    margin: 0;
    padding: 0;
    
    background-color: #deddb6;
}
 
*,
*:before,
*:after,
*:focus {
    box-sizing: border-box;
    outline: none;
}
 
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}
 
.grid-container {
    width: 90%;
    margin: 80px auto;
    display: grid;
    justify-items: center;
    align-items: start;
    grid-template-columns: 1fr 1fr   1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr   1fr 1fr;
    gap: 30px 40px;
    grid-template-areas: ". . . ."   ". . . ." ". . . ." ". . . ."   ". . . .";
}
 
.grid-container * { 
    border: 0;
    position: relative;
}
 
.grid-container *:after { 
    content:attr(class);
    position: absolute;
    top: 0;
    left: 0;
}
 
.book__item {
    position: relative;
    width: 250px;
    background-color: #eee;
}
 
.book__item h3 {
    padding: 3px;
    text-indent: .5em;
    text-align: center;
    line-height: 1.2em;
}
 
.book__item p {
    margin: 0;
    padding: 3px;
    text-indent: .3em;
}
 
.hidden__review {
    text-align: center;
    padding-top: 5px;
    color: #555;
    
}
 
.book__review {
    position: absolute;
    
    width: 400px;
    padding: 10px;
    border-radius: 0 10px 10px 10px;
    font-size: 15px;
    text-align: left;
    line-height: 1.3em;
    text-indent: .5em;
    
    background-color: #eee;
    
    z-index: 10;
    display: none;
}
 
.book__item:nth-child(4n+4)>.book__review {
    border-radius: 10px 0px 10px 10px;
    left: -150px;
}
</style>
<body><section class="books__list">
        
        <div class="grid-container">
            
            <div class="book__item"><img src="img/cover.jpg" alt="" class="book__cover"><!-- Нажать на этот блока для появления дочернего -->
            <h3>Название книги, её полное название.</h3>
            <p>Автор книги Ф. И. О.</p>
            <h4 class="hidden__review">Нажми чтобы прочитать рецензию</h4>
            <div class="book__review">Этот блок должен показаться при клике на родительский блок.</div>
            </div>
            
            <div class="book__item"><img src="img/cover.jpg" alt="" class="book__cover"><!-- Нажать на этот блока для появления дочернего -->
            <h3>Название книги, её полное название.</h3>
            <p>Автор книги Ф. И. О.</p>
            <h4 class="hidden__review">Нажми чтобы прочитать рецензию</h4>
            <div class="book__review">Этот блок должен показаться при клике на родительский блок.</div>
            </div>
 
            <div class="book__item"><img src="img/cover.jpg" alt="" class="book__cover"><!-- Нажать на этот блока для появления дочернего -->
            <h3>Название книги, её полное название.</h3>
            <p>Автор книги Ф. И. О.</p>
            <h4 class="hidden__review">Нажми чтобы прочитать рецензию</h4>
            <div class="book__review">Этот блок должен показаться при клике на родительский блок.</div>
            </div>
            
            <div class="book__item"><img src="img/cover.jpg" alt="" class="book__cover"><!-- Нажать на этот блока для появления дочернего -->
            <h3>Название книги, её полное название.</h3>
            <p>Автор книги Ф. И. О.</p>
            <h4 class="hidden__review">Нажми чтобы прочитать рецензию</h4>
            <div class="book__review">Этот блок должен показаться при клике на родительский блок.</div>
            </div>
 
            <div class="book__item"><img src="img/cover.jpg" alt="" class="book__cover"><!-- Нажать на этот блока для появления дочернего -->
            <h3>Название книги, её полное название.</h3>
            <p>Автор книги Ф. И. О.</p>
            <h4 class="hidden__review">Нажми чтобы прочитать рецензию</h4>
            <div class="book__review">Этот блок должен показаться при клике на родительский блок.</div>
            </div>
            
            <div class="book__item"><img src="img/cover.jpg" alt="" class="book__cover"><!-- Нажать на этот блока для появления дочернего -->
            <h3>Название книги, её полное название.</h3>
            <p>Автор книги Ф. И. О.</p>
            <h4 class="hidden__review">Нажми чтобы прочитать рецензию</h4>
            <div class="book__review">Этот блок должен показаться при клике на родительский блок.</div>
            </div>
 
        </div>
        
    </section>
</body>
</html>
Добавлено через 6 минут
Я в JS на уровне "начинающий" , тяжело. Код не срабатывает, возможно я криворукий)
0
899 / 832 / 197
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
21.06.2020, 20:53 4
Лучший ответ Сообщение было отмечено Demolition_Man как решение

Решение

Demolition_Man, используйте id для вёрстки, а класс для кода.

У вас открывается не следующий блок, а вложенный, нужно иначе к нему добираться


Цитата Сообщение от Demolition_Man Посмотреть сообщение
Когда внутри блока GRID создаю еще один блок с классом, то он выводится на экран т. е.
внутри блока есть несколько тегов html5, и когда я им задаю какой либо класс то он транслируется на экран, допустим
class="button" и слово button выводится на экран, если задать id для тэга то проблема исчезает, но у меня много блоков и мне нужно использовать классы, так я хочу реализовать кое что на JS.(скрыть показать блок под блоком GRID).
Вот это не понял.
Нужно разбираться с сеткой GRID.
Вам нужен макет с GRID-сеткой размером 4x5, а внутри блоки со статьями и раскрывающимися комментариями?

Вот пока пример с раскрытием внутренних (children) блоков и закрытием по повторному клику
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
<!DOCTYPE html>
<html>
<head><title>1. Внутренний блок открываем</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
$(document).ready(function () {
    
$(".main_block").click(function () {
    // все закрываем
    $(".hide_block").slideUp(200);
    // следующий открываем или закрываем
    var ch_block = $(this).children('.hide_block');
    
       if (ch_block.css('display')=='none')
             ch_block.slideDown(200);
      else {
             ch_block.slideUp(200);
       } 
   }); //click           
});// end ready
</script>
</head>
<style>
.main_block{
    width: 600px;
    height: 70px;
    margin: 10px 0px 0px 40px;
    border: 2px solid green;
    padding: 10px;
    cursor: pointer;
}
.hide_block{
    width: 400px;
    height: 20px;
    margin: 10px 0px 0px 40px;
    border: 2px solid red;
    padding: 10px;
    display: none;
}
    
</style>
<body>
<div class="main_block">1
       <div class="hide_block">1</div>
</div>
 
<div class="main_block">2
       <div class="hide_block">2</div>
</div>
 
<div class="main_block">2
       <div class="hide_block">2</div>
</div>
<!--сколько угодно пар блоков-->
</body>
</html>
1
20 / 13 / 8
Регистрация: 20.02.2019
Сообщений: 111
21.06.2020, 21:17  [ТС] 5
Я исправил проблему с классами, тупо убрав из блока у каждого тэга свой класс.
Могу ли я теперь обращаться в определенному тэгу по названию Родительского класса и тэга внутри него? Имею в виду как это в JS выглядит)

Добавлено через 8 минут
Вот что я сделал, не помогло
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
<head>
    <meta charset="UTF-8">
    <title>Books</title>
    <link rel="stylesheet" type="text/css" href="css/style_books.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="http://code.jquery.com/jquery-latest.js">
</script>
    <script>
$(document).ready(function () {
    
$("..book__item").click(function () {
    // все закрываем
    $(".book__item > p").slideUp(200);  // внутри book__item в самом его конце есть блок <p></p> который я пытаюсь открыть
    // следующий открываем или закрываем
    var ch_block = $(this).children('.book__item > p');
    
       if (ch_block.css('display')=='none')
             ch_block.slideDown(200);
      else {
             ch_block.slideUp(200);
       } 
   }); //click           
});// end ready
</script>
</head>
Добавлено через 12 минут
Всё получилось! Исправил ошибки (убрал точку вторую в классе.) Спасибо Вам огромное, не представляю сколько у вас нервов на таких как я.)
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
21.06.2020, 21:17

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

String Grid и работа с классами
помогите кто сможет!! 1. Составить программу, которая организует ввод матрицы размерностью 5х5 ...

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

А кроме Data Grid есть еще какой-нибудь Grid?
Вопрос конечно тупой, но что-то смотрю и не вижу. Или может не туда смотрю. Одним словом торможу. ...

Как изменить Grid.Row и Grid.Column в элементе
как переместить кнопку из одной ячейки в другую при нажатии на нее или как поменять содержимое...

Неправильная ширина в Css Grid (grid-template-columns)
По высоте все нормально, но ширину никак не додумаюсь как выставить как на макете в итоге получил ...

CSS grid (display: grid) как расположить блоки?
Пожалуйста подскажите как мне с помощью display grid рассположить блоки как на скриншоте


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.