CSS：对齐div内的元素

Question

我有一个包含三个元素的 div，但在正确定位最后一个元素时遇到问题。左边的div必须在左边，中间的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>

有什么想法吗？

谢谢！

Answer 1

您还没有为容器 div 包含 css，但是每当它包含浮动元素时，您都应该隐藏溢出，如下所示：

#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;
}

Answer 2

我认为你的问题是你浮动了左侧和右侧的元素，但没有浮动中心的元素。尝试这样的事情：

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>

Answer 3

问题具体在于中间的 div 设置了宽度但没有浮动，这意味着它仍然是块级元素。尽管 div 本身并不占据容器的整个宽度，但它仍然被视为这样。您需要做两件事 - 浮动中间的 div，然后清除浮动，以便容器随着子 div 的高度而增长。首选clearfix方法，因为它不会导致CSS3属性出现问题，这些属性自然会扩展到它们所应用的元素的边界之外（box-shadow、text-shadow等）。

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

Answer 4

我有完全相同的问题。我用了这个方法。我使中心元素显示内联块。这样我就不必给元素特定的宽度或主容器特定的高度。这些块只占用与内部内容一样多的空间。希望这有帮助。

.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>

强文本