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

我认为你的问题是你漂浮了左右元素，但不是中心元素。尝试是这样的：

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 2

您还没有包括CSS为您div容器，但每当它包含浮动元素，你应该隐藏溢出，像这样：

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

当您定位中间div时，您正在设置跨越en轮胎集装箱，所以任何进一步的元素都被定位在下面的线上。请注意，至少对于大多数现代浏览器而言，还有。如果你重新排列你的元素，像这样：

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

的问题是特别的是，中间div有一个宽度设置，但是不浮动，这意味着它仍然是一个块级元素。即使div本身没有达到容器的整个宽度，它仍然是这样对待的。你需要做2件事 - 浮动中间div，然后清除浮动块，以便容器随着子div的高度增长。 clearfix方法是首选，因为它不会导致CSS3属性出现问题，这些属性自然延伸到它们应用于的元素边界之外（box-shadow，text-shadow等）。

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>

强大的文本