Позиционирование 3 разделов внутри контейнера слева, по центру, справа

ProgramBox

Позиционирование 3 разделов внутри контейнера слева, по центру, справа

Post author:admin
Запись опубликована:8 марта, 2023
Post category:Вопросы по программированию

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Я пытался центрировать div логотипа внутри заголовка, в котором всего 3 divs. Я выбираю позиционирование слева, по центру, справа.

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

Я хочу, чтобы на центральный div не влияли левые и правые divs.

Вот мой пример кода: http://codepen.io/anon/pen/KDhou

 <header>
 <div class="left">LEFT ALSO PUSHES CENTER DIV</div>
 <div class="right"> RIGHT PUSHES CENTER DIV</div>
 <div class="center">CENTER</div>
</header>

и css

  header{
 color:white; 
   position: absolute;
  text-align: center;
  left: 0;
  width:100%;
  top: 0;
  background-color: #2995f3;}

.center{
  position: absolute;
  display: inline-block;
  background:green;
}
.left{
    float: left;
    background:grey
}
.right{
    float: right;
    background:red
}

1. Вы пробовали задать для правого и левого divs максимальную ширину для перехода?

2. Я не хочу ограничивать левый и правый divs фиксированной шириной, потому что это адаптивный макет

3. position:absolute УДАЛЯЕТ элемент из содержащего его элемента. Вы хотите position:relative для .center div. Дайте левому и правому divs ширину, затем присвоите ваши значения вашему центральному div. Кроме того, в вашем HTML это должно быть left — center — right

4. Есть ли способ не регулировать ширину…

5. не задавая заголовку или левым и правым элементам заданную ширину, вы в значительной степени облажались. Вам нужно будет придать чему-то фактическую ширину, чтобы css было на чем основываться.

Ответ №1:

Я рекомендую внести некоторые изменения в ваш файл .css.

  header{
color:white; 
position: absolute;
text-align: center;
left: 0;
width:100%;
top: 0;
background-color: #2995f3;}

.center{
position: fixed;
display: inline-block;
background:green;
}
.left{
left:0px;
position:fixed;
background:grey
}
.right{
right:0px;
position:fixed;
background:red
}

положение классов .center , .left amp; also .right для исправления
и устранения плавающих значений из .left и .right и add left:0px; и right:0px; соответственно.
Вот оно .. http://codepen.io/rjeet0/pen/xyDGg
. Спасибо.

1. моя проблема в том, что фон заголовка больше не виден, потому что он не увеличивает высоту других элементов, поскольку они «исправлены» каким-либо обходным путем? @user3753346

2. Вы можете использовать параметр ширины для зеленого фона. используйте эту ширину: 80 пикселей; codepen.io/rjeet0/pen/xiJlk

Ответ №2:

Смотрите здесь-> http://jsfiddle.net/KLXPL/1 /. Ваш центральный div остается в центре при изменении размера браузера. Это HTML и CSS я использовал:

HTML:

 <header>
    <div class="left">LEFT ALSO PUSHES CENTER DIV</div>
    <div class="right">RIGHT PUSHES CENTER DIV</div>
    <div class="center">CENTER</div>
</header>

CSS:

 header {
    color:white;
    position: absolute;
    text-align: center;
    left: 0;
    width:100%;
    top: 0;
    background-color: #2995f3;
}
.center {
    clear:both;
    display: inline-block;
    background:green;
}
.left {
    float: left;
    background:grey;
    display:inline-block;
}
.right {
    float: right;
    background:red;
    display:inline-block;
}

Надеюсь, это поможет!!!

1. Он не хочет указывать ширину элементов, иначе это было бы так просто, как вы заявляете.

2. Отредактировал мой ответ. К элементам больше не привязана фиксированная ширина. Центральный div по-прежнему остается в центре.

3. Возможно ли фиксированное положение элемента внутри контейнера? чтобы он был центрирован внутри этого контейнера независимо от других элементов.

4. К сожалению, ваш новый код на самом деле не центрирован, потому что, если вы добавляете или удаляете содержимое слева или справа, оно снова перемещается в центр.

5. ну, есть способ сделать это с помощью таблицы… но вам это не понравится

Ответ №3:

Если вы задаете для своего .center класса стиль с:

 .center{
  position: absolute;
  display: inline-block;
  background:green;
  left: 50%;
  right: 50%;
}

вы можете сделать логотип по центру, используя в качестве ссылки header ширину.