Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Как разместить блок произвольной ширины в центре другого блока?

Как разместить блок произвольной ширины в центре другого блока?


Ведь, если ширина не фиксирована, маргин 0 авто не работает



Способ


не работает, если вместо текста в контейнер помещать дивы. А мне нужно поместить именно их...


Помогите, уже 2й день голову ломаю.
Ответ:
.. но появляется другая проблема, пока зеленые блоки помещаются в одну строку, то блок с border: red = ширине входящих блоков, но как только они перестают помещаться (ну допустим их 20 шт с шириной каждого в 100 px), то при переносе их на другую строку блок с border: red становиться во всю ширину, а не по ширине содержимого. между зелеными блоками и красной рамкой справа если менять ширину окна - меняется, а слева - все прибито к левому краю.

Как сделать чтобы красная рамка была по щирине зеленых блоков ?
Вопрос: Блок внутри другого блока

Как разместить блок внутри другого блока ровно по центру по отношению к внешнему блоку.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
    
 <header>
 
        <div class="business-card">
 
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 Excepteur sint occaecat cupidatat non proident, 
                sunt in culpa qui officia deserunt mollit anim id est laborum."
                </p>
        </div>
    </header>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
header{
    margin:0px;
    display:block;
    height:600px;
    width:100%;
    background-image:url(header.jpg);
    background-size:100% 100%
 
}
 .business-card{
         width:90%;
         max-width:1300px;
         background-color:azure;
         height:300px;
         margin-left:5%;
         margin-right:0%;
         margin-top:50px;
     }
В хедере на весь экран фон. И мне нужно чтобы по средине хедера размещался div budiness-card . Когда пробую задать margin для budiness-card то сдвигается и хадер с фоном и budiness-card который как бы внутри хедера.
Ответ:
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
body {
  background: #f06d06;
  font-size: 80%;
  padding: 20px;
}
 
header {
  position: relative;
  background: white;
  height: 200px;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  resize: both;
  overflow: auto;
}
 
header div {
  background: black;
  color: white;
  width: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
  resize: both;
  overflow: auto;
}
HTML5
1
2
3
4
5
6
7
<header>
  
  <div>
     I'm a block-level element of an unknown height and width, centered vertically within my parent.
  </div>
  
</header>
Вопрос: Отступы одного элемента по ширине двух других

Доброго времени суток)
Помогите с кодом,пожалуйста. Есть 3 блока. Два выровнены по двум сторонам (float:right и float:left).Их широты равна их контенту(то-есть не известны)Есть 3 блок,он находиться по средине(между двух других)
Нужно сделать ему ширину и отступы по ширине двух других блоков...(все они по горизонтали выровнены)
Очень нужна помощь...Заранее благодарю)
Ответ: Это же арифметика. Суммируй, вычитай, присваивай.
Вопрос: Смещение других блоков из-за появлении блока

Здравствуйте.
Есть, допустим 10 блоков, у которых обертка имеет display:flex и flex-wrap:wrap.

Каждый из этих блоков представляют собой список. В исходном виде видно 6 строк у каждого блока. Присутствует кнопка "показать все", которая открывает оставивший(обернутый в блок) список с помощью js (добавляет display:block). Проблема в том, что, когда нажимаешь по "показать все", этот блок, которому добавили display:block двигает блоки справа и слева под свою высоту.

Как спозиционировать так, чтобы двигались только блоки, которые находятся ниже(т.е. двигался столбец).
Возможно ли это сделать вообще при помощи flexbox?

Можно ли для flex-direction: column сделать новый столбец(как для flex-direction: row - flex-wrap:wrap)
Блоки отличаются только названием class="socialobes basis"


HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="socialobes basis">
 
        <a href="#"><h2>Социальное обеспечение</h2></a>
 
  <ul>
   <li>подъёмные</li>
<li>индексация материнского капитала</li>
<li>бесплатная юридическая помощь многодетным семьям</li>
<li>оплата учебы материнским капиталом</li>
</ul>
 
       <span class="openli">показать все</span>
       <div class="openall">
        <ul><li>социальная стипендия</li>
 
<li>бесплатная юридическая помощь детям сиротам</li>
<li>региональный материнский капитал</li>
<li>пенсии и пособия</li>
<span class="closeli">скрыть</span>
</ul>
 </div>
</div>


Ответ: AlexZaw, Добрый день! подскажите пожалуйста! какие свойства задать в блок, что бы он был как бы преградой. для других блоков ? что бы двигая другие блоке в верх они упёрлись бы в блок
Вопрос: Блоки relative и position внутри блока с position: relative

Всем привет!

Я новичок, верстаю свой первый сайт (). У меня возник вопрос касательно слайдера.

Есть контейнер, у которого position: relative. Внутри него расположены 3 diva, у первых двух position: absolute, а у последнего - position:relative. У всех выставлены z-index, которые меняются с помощью яваскрипт.

Что я не могу понять:

1. Почему, если у всех дочерних блоков выставить absolute, то эти блоки накрывают весь контент, который лежит ниже? То есть контейнер как бы схлопывается. А весь нижележащий контент поднимается вверх и его накрывают картинки слайдера.

2. Если первому или второму блоку задать position:relative, то блоки, которые идут после с position: absolute смещаются ниже. То есть находятся под блоком, у которого position:relative. То есть они как бы относительно него позиционируются, а не относительно контейнера.

Основу конструкции слайдера я посмотрел в одном html-шаблоне, скачанном в интернете. Хотя всё вроде работает, но хочется понять, почему и из-за чего происходит то, что я обозначил.

Буду очень признателен, если подскажете, как разобраться в сути происходящего.

Спасибо!
Ответ: 1. Да, opacity меняется, но также меняется и z-index путём изменения класса (при помощи яваскрипт), непосредственно в котором и прописано значение z-index.

2. "Блоки с position:absolute вырваны из нормального потока и остальные элементы отображаются так, будто этого элемента нет." С этим моментом сейчас вроде понятнее для меня стало.

3. Да, я понял, если 2 relative, то один будет идти за другим. А если просто одному верхнему блоку задать relative, то другие с absolute всё-равно смещаются вниз. А вот когда последнему блоку задаём relative, то всё нормально получается. Почему так?
Вопрос: Как выровнять текст в центр своего блока

Как выровнять текст в центр своего блока?

Для span так не работает.
CSS
1
2
height: 350px;
  vertical-align:middle;
Добавлено через 33 минуты
Мне нужно отцентровать.
Текст.
CSS
1
2
3
4
5
    width:350px;
    height: 75px;
    display:table-cell;
    text-align: center;
    vertical-align: middle;
Ячейка
CSS
1
text-align:center;
В ячейке текст почему-то крепится к левому краю. А мне нужно, чтобы и по вертикали, и по горизонтали выравнялось в центр.

 Комментарий модератора 
На каждый вопрос создавайте по одной теме! (Правила п.4.4)


 Комментарий модератора 
Запрещено публично обсуждать действия администрации форума, касающиеся их прямых обязанностей! (Правила п.6.5)
Ответ: Задавайте значение line-height равным высоте блока.
CSS
1
2
3
4
.clstart{
    height:100px;
    line-height: 100px; 
}
Вопрос: Адаптивные блоки разной ширины

Как сделать адаптивные блоки неизвестной ширины? именно хочу сделать для картинок как тут flickr.com/explore.
Ширины изображений не могу знать, т.к они отличаются. Может есть примеры какие-нибудь?
Ответ: Проще всего воспользоваться одной из готовых js библиотек. Например
Гуглится много чего



А знать ширину изображений можно и нужно. Как правило, скрипт загрузки проверяет картинку и заполняет на неё "паспорт" в базе данных. Когда выводишь галерею, читаешь таблицу с описателями и только потом создаешь теги <img> с превьюшками. Так что нет проблем с тем чтобы знать ширину.

P.S. Уж не для компании ли "Трето" ты пишешь тестовое задание? )))
Вопрос: Как сделать чтобы текст не заходил на другой блок?

Как сделать чтобы не зависимо сколько текста в блоке, что бы блок растягивался за текстом.
То-есть у меня огромный текст и он вводится в блок контейнер, и когда заканчивается блок что бы текст не заходил на другой блок а был в этом контейнере, ну что бы контейнер растягивался в зависимости от текста.
Ответ: я сделал фиксированые блоки и проблема решилась.
Делаю так:
CSS
1
min-height: 100px;
На счет правильности я не уверен)
Вопрос: Плавное перемещение одного блока наверх и исчезновение других блоков при клике

Добрый день,

Подскажите, пожалуйста, есть ли уже реализованный код или где можно найти идейки для реализации такого замысла: нужно чтобы при клике на третий блок, он плавно переместился бы наверх, а остальные блоки бы исчезли. Спасибо.

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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>New</title>
 
<style type="text/css">
#space {
    height: 40px;
}
</style>
 
<style type="text/css">
#block1{
 width:29%; 
background:rgb(191,191,191);
 height:100px; 
 padding: 5px; 
 margin:0 31% auto; 
}
 
#block2{
 width:25%; 
 height:100px; 
 background:rgb(191,191,191);
 display: inline-block;
 margin:2%; 
 padding: 10px; 
 }
 
#1level {
  display: table; 
  width: 100%; 
  border-spacing: 10px 10px; 
}
</style>
 
</head>
 
<body>
 
<div id="1level">
   <div id="block1">1 блок</div>
   <div id="space"></div>
   <div id="block2">2 блок</div>
   <div id="block2">3 блок</div>
   </div> 
    
</body>
</html>
Ответ: Спасибо. Начну изучать)
Вопрос: Смещение внутри блока, другого блока, без изменения первого

Возможно ли такое? Есть блоки
HTML5
1
2
3
4
5
6
7
            <ul id="navigation">
                <li><a href="#"><div id="line_fx"></div> Домой</a></li>
                <li><a href="#"><div id="line_fx"></div>Что-то 1</a></li>
                <li><a href="#"><div id="line_fx"></div>Что-то 2</a></li>
                <li><a href="#"><div id="line_fx"></div>Что-то 3</a></li>
                <li><a href="#"><div id="line_fx"></div>О сайте</a></li>
            </ul>
Во внутрь вставил div блок, хочу передвигаться внутри этой конструкции, а точнее - по умолчанию div находится вверху слева и меняет собой основной блок. Можно ли двигать div блок так, что бы он собой не менял тот в котором находится? А то начинаю передвигаться, и всё начинает менять размер. Картинка для видимости.
Ответ: Ничего не понял. Как вы собираетесь двигать блок и зачем?