Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выстроенные блоков друг за другом inline-block / 9 сообщений из 9, страница 1 из 1
26.11.2017, 18:05
    #39559668
Nechto
Nechto
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выстроенные блоков друг за другом inline-block
Здравствуйте! Подскажите пожалуйста, как расположить блоки точно так же как реализовано в скрипте ниже, но не используя 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, 23:27
    #39559732
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выстроенные блоков друг за другом inline-block
Nechto,
flex ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.11.2017, 07:59
    #39559777
Nechto
Nechto
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выстроенные блоков друг за другом inline-block
вадяNechto,
flex ?
Попробовал не получилось.

Дело в том что в marketCatalog указана точная ширина элемента, а в marketItems она произвольная. Как это победить?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.11.2017, 14:23
    #39560001
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выстроенные блоков друг за другом inline-block
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:50
    #39560022
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выстроенные блоков друг за другом inline-block
Nechto , а еще таблицей можно сделать...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.11.2017, 15:16
    #39560045
Nechto
Nechto
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выстроенные блоков друг за другом inline-block
krvsa Nechto , а еще таблицей можно сделать...
Таблицей можно сделать, но как-то не хочется возвращаться к ним.

Ваш скрипт не решил вопрос. Мне нужно железно привязать эти классы marketCatalog , marketItems к друг другу. Чтобы при уменьшении страницы они все равно держали строй.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.11.2017, 17:20
    #39560119
Руслан Дамирович
Руслан Дамирович
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выстроенные блоков друг за другом inline-block
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
| Ответить | Цитировать | Написать  
28.11.2017, 10:28
    #39560365
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выстроенные блоков друг за другом inline-block
NechtoТаблицей можно сделать, но как-то не хочется возвращаться к ним.
Чем же таблицы провинились?
NechtoВаш скрипт не решил вопрос. Мне нужно железно привязать эти классы marketCatalog , marketItems к друг другу. Чтобы при уменьшении страницы они все равно держали строй.
Про это кагбэ речи не было.
Как вариант, в тех же таблицах есть ЦСС-свойства запрещающие "перенос по словам", т.ч. возможно это и есть решение твоей проблемы.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.12.2017, 15:09
    #39567704
Nechto
Nechto
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Выстроенные блоков друг за другом inline-block
наконец вернулся к верстке. Flex помог! Правда поддержка в IE10 хворает, ну ничего стерпится.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выстроенные блоков друг за другом inline-block / 9 сообщений из 9, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 480ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1444372]:
 0ms
get settings:
 10ms
get forum list:
 13ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 154ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 46ms
get tp. blocked users:
 2ms
others: 232ms
total:  480ms
x
x
Закрыть


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