CSS：对齐 div 内的元素

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 */
}

当您 position 中间 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 本身没有 go 容器的整个宽度，它仍然被视为这样。 您需要做 2 件事 - 浮动中间 div，然后清除浮动，以便容器随着子 div 的高度而增长。 首选 clearfix 方法，因为它不会导致 CSS3 属性出现问题，这些属性自然延伸到它们所应用的元素的边界（框阴影、文本阴影等）之外。

http://perishablepress.com/press/2009/12/06/new-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>

强文本