CSS：对齐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>

我是中间元素中的文本
我是正确元素中的文本

有什么想法吗

---

谢谢

我认为您的问题在于您浮动了左元素和右元素，而不是中心元素。试着这样做：

CSS:

#容器{显示：块；边距：0；填充：0；宽度：640px；高度：400px；轮廓：1px实心#000；}
#左元素{浮点：左；显示：块；边距：10px；填充：0；宽度：200px；高度：380px；背景：#ccc；}
#中间元素{浮点：左；显示：块；边距：10px 0；填充：0；宽度：200px；高度：380px；背景：#eaeaea；}
#右元素{浮点：左；显示：块；边距：10px；填充：0；宽度：200px；高度：380px；背景：#ddd；}

HTML:

左元素
中间元素
右元素

您还没有为容器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>

---

问题是中间的div有一个宽度集，但没有浮动，这意味着它仍然是块级元素。即使div本身没有达到容器的整个宽度，它仍然被视为容器的整个宽度。您需要做两件事-浮动中间div，然后清除浮动，以便容器随子div的高度增长。clearfix方法是首选方法，因为它不会导致CSS3属性的问题，这些属性自然会扩展到它们应用到的元素（框阴影、文本阴影等）的边界之外

---

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

.main导航{
文本对齐：居中；
填充物：2em 3em；
背景#f4；
}
#标志{
保证金：0；
宽度：50px；
浮动：左；
边缘顶部：18px；
}
#徽标链接{
浮动：左；
显示：内联块；
}
.姓名{
显示：内联块；
}
.导航{
浮动：对；
边缘顶部：18px；
}
李国荣先生{
浮动：左；
右边距：15px；
边缘顶部：5px；
}
李海军：最后一个孩子{
右边距：0；
}

麦奇家族网站
设计师

容器div的宽度是多少？当然，这是假定中间元素的高度未知或字体大小可变。否则，您可以只应用边距顶部：-##px；到右边的元素；）溢出：hidden不是清除浮动的好方法，因为它会导致CSS3属性出现意外问题。Clearfix是更好的方法。您需要为此添加一个浮动清除方法，这样可以避免指定容器div的高度，但是您发现了问题，中心div id没有浮动，因此它仍然是块级元素。您是对的Brent。我通常使用某种clearfix样式，作为类应用于容器。我习惯于用更少的语言写我所有的风格，所以像这样写长格式，没有我的混合和变量，我有时会忽略这些东西。

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

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

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