ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выстроенные блоков друг за другом inline-block
9 сообщений из 9, страница 1 из 1
Выстроенные блоков друг за другом inline-block
    #39559668
Nechto
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Nechto
Гость
Здравствуйте! Подскажите пожалуйста, как расположить блоки точно так же как реализовано в скрипте ниже, но не используя position: absolute; в классе .marketItems ?

Для наглядности скрипт можно подставить сюда https://jsfiddle.net/

Код: 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.
<style rel="stylesheet" type="text/css">
.marketCatalog {
    width: 155px;
    display: inline-block;
    float:left;
}
.catalog{
    background: #32425f;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: #ffffff;
    padding: 5px;
}
.catalog h3 {
    font-size: 25px;
    margin-bottom: 25px;   
}
.marketItems { 
    display: inline-block;
    float:left;
    vertical-align: top;
    background-color: gray;
    position: absolute; /* без этого свойства */
}
.item {
    margin-left: 30px;
    margin-bottom: 10px;
    display: inline-block;
    background-color: yellow;
}

</style>
<body>
   <div class="marketCatalog">	
       <div class="catalog"> 
           <h3>Каталог</h3>                     
       </div>
   </div>                
				
   <div class="marketItems">
      <div class="item">Product 1</div>
      <div class="item">Product 2</div>
      <div class="item">Product 3</div>
      <div class="item">Product 4</div>
   </div>
</body>
...
Рейтинг: 0 / 0
26.11.2017, 18:05
| Ответить | Цитировать | Написать  
Выстроенные блоков друг за другом inline-block
    #39559732
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Nechto,
flex ?
...
Рейтинг: 0 / 0
26.11.2017, 23:27
| Ответить | Цитировать | Написать  
Выстроенные блоков друг за другом inline-block
    #39559777
Nechto
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Nechto
Гость
вадяNechto,
flex ?
Попробовал не получилось.

Дело в том что в marketCatalog указана точная ширина элемента, а в marketItems она произвольная. Как это победить?
...
Рейтинг: 0 / 0
27.11.2017, 07:59
| Ответить | Цитировать | Написать  
Выстроенные блоков друг за другом inline-block
    #39560001
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
NechtoПодскажите пожалуйста, как расположить блоки точно так же как реализовано в скрипте ниже, но не используя position: absolute; в классе .marketItems ?
Как вариант...
Код: 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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://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>
-->
<style type='text/css'>
.marketCatalog {
    width: 155px;
    float:left;
}
.catalog{
    background: #32425f;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: #ffffff;
    padding: 5px;
}
.catalog h3 {
    font-size: 25px;
    margin-bottom: 25px;   
}
.marketItems { 
    display: inline-block;
    vertical-align: top;
    background-color: gray;
}
.item {
    margin-left: 30px;
    margin-bottom: 10px;
    display: inline-block;
    background-color: yellow;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class="marketCatalog">	
	<div class="catalog"> 
		<h3>Каталог</h3>                     
	</div>
</div>                
<div class="marketItems">
	<div class="item">Product 1</div>
	<div class="item">Product 2</div>
	<div class="item">Product 3</div>
	<div class="item">Product 4</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
27.11.2017, 14:23
| Ответить | Цитировать | Написать  
Выстроенные блоков друг за другом inline-block
    #39560022
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Nechto , а еще таблицей можно сделать...
...
Рейтинг: 0 / 0
27.11.2017, 14:50
| Ответить | Цитировать | Написать  
Выстроенные блоков друг за другом inline-block
    #39560045
Nechto
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Nechto
Гость
krvsa Nechto , а еще таблицей можно сделать...
Таблицей можно сделать, но как-то не хочется возвращаться к ним.

Ваш скрипт не решил вопрос. Мне нужно железно привязать эти классы marketCatalog , marketItems к друг другу. Чтобы при уменьшении страницы они все равно держали строй.
...
Рейтинг: 0 / 0
27.11.2017, 15:16
| Ответить | Цитировать | Написать  
Выстроенные блоков друг за другом inline-block
    #39560119
Руслан Дамирович
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Руслан Дамирович
Участник
Nechto,
не уверен, что это решит проблему, но, возможно, натолкнет на мысли...
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<body>
  <div class="topContent">
    <div class="marketCatalog">	
      <div class="catalog"> 
        <h3>Каталог</h3>                     
      </div>
    </div><div class="marketItems">
      <div class="item">Product 1</div>
      <div class="item">Product 2</div>
      <div class="item">Product 3</div>
      <div class="item">Product 4</div>
    </div>
  </div>
</body>


Код: 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.
.topContent {
  display: flex;
  width: 100%;
}
.topContent > * {
  display: inline-flex;
  flex-direction: row;
}
.marketCatalog {
  max-width: 155px;
}
.marketItems { 
    width: 100%;
    min-width: 0;
    vertical-align: top;
    background-color: gray;
}
.item {
    background-color: yellow;
    margin-left: 30px;
    margin-bottom: 10px;
    //min-width: 0;
    display: flex;
    flex-direction: row;
}
...
Рейтинг: 0 / 0
27.11.2017, 17:20
| Ответить | Цитировать | Написать  
Выстроенные блоков друг за другом inline-block
    #39560365
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
NechtoТаблицей можно сделать, но как-то не хочется возвращаться к ним.
Чем же таблицы провинились?
NechtoВаш скрипт не решил вопрос. Мне нужно железно привязать эти классы marketCatalog , marketItems к друг другу. Чтобы при уменьшении страницы они все равно держали строй.
Про это кагбэ речи не было.
Как вариант, в тех же таблицах есть ЦСС-свойства запрещающие "перенос по словам", т.ч. возможно это и есть решение твоей проблемы.
...
Рейтинг: 0 / 0
28.11.2017, 10:28
| Ответить | Цитировать | Написать  
Выстроенные блоков друг за другом inline-block
    #39567704
Nechto
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Nechto
Гость
наконец вернулся к верстке. Flex помог! Правда поддержка в IE10 хворает, ну ничего стерпится.
...
Рейтинг: 0 / 0
11.12.2017, 15:09
| Ответить | Цитировать | Написать  
9 сообщений из 9, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выстроенные блоков друг за другом inline-block
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?desktop=1&fid=22&tid=1444372]:
 0ms
get settings:
 9ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 163ms
get topic data:
 14ms
get forum data:
 3ms
get page messages:
 51ms
get tp. blocked users:
 2ms
others: 13ms
total:  277ms
созд. / загр.: 277ms
x
x
Закрыть


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