Question

我有一个包含三个元素的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/new-clearfix-hack/

Answer 4

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

＆＃13;

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

＆＃13;

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

＆＃13;

强文

CSS：在div中对齐元素

4 个答案: