CSS: выравнивание элементов внутри div - PullRequest
Новая
       0

CSS: выравнивание элементов внутри div

2 голосов
/ 30 апреля 2011

У меня есть div, который содержит три элемента, и у меня возникают проблемы с правильным позиционированием последнего.Элемент div слева должен быть слева, центр посередине должен быть центрирован, а третий - справа.

Итак, у меня есть что-то вроде: 

#left-element {
    margin-left: 9px;
    margin-top: 3px;
    float:left;
    width: 13px;
}

#middle-element {
    margin:0 auto;
    text-align: center;
    width: 300px;
}

#right-element {
    float:right;
    width: 100px;
}

Мой HTML выглядит так: 

   <div id="container-div">
        <div id="left-element">
            <img src="images/left_element.png" alt="left"/>
        </div>
        <div id="middle-element">
            I am the text inside the middle element
        </div>
        <div id="right-element">
            I am the text in right element
        </div>
    </div>

Есть идеи?

Спасибо!

Ответы [ 4 ]

5 голосов
/ 30 апреля 2011

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

#container {
  overflow: hidden;
  width: 100%; /* for good measure */
}

Когда вы устанавливаете средний div, вы устанавливаете поля, которые охватывают весь контейнер, поэтому все остальные элементы располагаются в строке ниже. Обратите внимание, по крайней мере, для большинства современных браузеров, далее . Если вы измените порядок элементов, например: 

<div id="container">
    <div id="left-element">
        <img src="images/left_element.png" alt="left"/>
    </div>
    <div id="right-element">
        I am the text in right element
    </div>
    <div id="middle-element">
        I am the text inside the middle element
    </div>
</div>

Вы должны найти, что это работает. Лучший метод , так как я не совсем уверен, будет ли это предполагаемым работать, будет использовать позиционирование css. Примените следующие CSS: 

#container {
  overflow: hidden;
  width: 100%;
  min-height: 36px; /* Remember absolute positioning is outside the page flow! */
  position: relative;
}
#left-element {
  position: absolute;
  left: 9px;
  top: 3px;
  width: 13px;
}
#middle-element {
  margin: 0 auto;
  text-align: center;
  width: 300px;
}
#right-element {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100px;
}
1 голос
/ 30 апреля 2011

Проблема, в частности, в том, что средний div имеет установленную ширину, но не смещается, то есть он все еще является элементом уровня блока.Даже если сам div не занимает всю ширину контейнера, он все равно обрабатывается как таковой.Вам нужно сделать 2 вещи - плавать средний div, затем очистить float так, чтобы контейнер рос с ростом дочерних div.Метод clearfix является предпочтительным, поскольку он не вызывает проблем со свойствами CSS3, которые естественным образом выходят за границы элемента, к которому они применяются (box-shadow, text-shadow и т. Д.).

http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

1 голос
/ 30 апреля 2011

Я думаю, что ваша проблема в том, что вы перемещали левый и правый элемент, но не центральный.Попробуйте что-то вроде этого:

CSS: 

<style>
    #container { display:block; margin:0; padding:0; width:640px; height:400px; outline:1px solid #000; }
        #left-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ccc; }
        #middle-element { float:left; display:block; margin:10px 0; padding:0; width:200px; height:380px; background:#eaeaea; }
        #right-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ddd; }
</style>

HTML: 

<div id="container">
    <div id="left-element">Left Element</div>
    <div id="middle-element">Middle Element</div>
    <div id="right-element">Right Element</div>
</div>
0 голосов
/ 17 ноября 2017

У меня была точно такая же проблема. Я использовал этот подход. Я сделал центральный элемент отображения встроенным блоком. Таким образом, мне не нужно было указывать элементам конкретную ширину или основной контейнер определенной высоты. Блоки занимали столько же места, сколько и содержимое внутри. Надеюсь, это поможет. 

.main-nav {
  text-align: center;
  padding: 2em 3em;
  background: #f4f4f4;
}

#logo {
  margin: 0;
  width: 50px;
  float: left;
  margin-top: 18px;
}

#logo-link {
  float: left;
  display: inline-block;
}

.name {
  display: inline-block;
}

.nav {
  float: right;
  margin-top: 18px;
}
.nav li {
  float: left;
  margin-right: 15px;
  margin-top: 5px;
}

.nav li:last-child {
  margin-right: 0;
}
<header class="clearfix">
      <div class="main-nav">
        <a href="index.html" id="logo-link" class="clearfix"><img src="img/site-logo.svg" alt="Munchies" id="logo"></a>

          <div class="name">
            <h1>The Munchies Family Site</h1>
            <h2>Designer</h2>
          </div>

        <nav class="nav clearfix">
          <ul>
            <li><a href="index.html">Gallery</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </div>
    </header>

сильный текст

...