CSS - 對齊兩個div左右的同一行

請參閱http://jsfiddle.net/UGmA2/7/ TIACSS - 對齊兩個div左右的同一行

1格容器2周的div。想把第二個div放在第一行，但一直到右邊。

enter image description here 任何幫助，將不勝感激，

<body background-color: #000000;> 
    <div id="footer-container" style="width=980px;"> 
     <div id="div-left"> 
      <ul id="footer"> 
       <li id="text_separator"><a href="http://www.stackoverflow.org">Text</a> 

       </li> 
       <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a> 

       </li> 
       <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a> 

       </li> 
       <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a> 

       </li> 
       <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a> 

       </li> 
      </ul> 
     </div> 
     <div id="div-left"> 
      <ul id="footer"> 
       <li id="text_separator"><a href="http://www.stackoverflow.org">Text1</a> 
        <li id="text_separator"><a href="http://www.stackoverflow.org">Text2</a> 

         <li id="text_separator"><a href="http://www.stackoverflow.org">Text3</a> 

          <li id="text_separator"><a href="http://www.stackoverflow.org">Text4</a> 
      </ul> 
     </div> 
    </div> 
</body>

來源

2013-11-01 Lacer

一個有用的提示爲你的未來職業生涯網絡，'ids'是獨一無二的，只能在使用一次而'classes'不是唯一的。它們可以在同一頁面上多次使用。 –

變化DIV ID上課。在同一頁面上不能有兩個ID。給div的寬度，例如width:45%並浮動這些項目。

看起來第一個div的寬度迫使第二個下面的行。

來源

2013-11-01 01:09:28 otherDewi

要第一個div添加的樣式，這樣<div id="first-div" style="float-left;width:400px>

對於第二個div這樣<div id="second-div" style="float-right;width:400px>希望這有助於

來源

2013-11-01 01:10:29

使用樣式「浮動」會要求你使用的樣式「寬度」所以測出容器的寬度要知道適當的寬度分配給內部的div

來源

2013-11-01 01:25:56

使用相同id反覆是不是一個好主意，我改變這一切爲class

這裏是修改

<body > 
    <div class="footer-container"> 
    <div class="div-left"> 
     <ul class="footer"> 
     <li><a href="http://www.stackoverflow.org">Text</a> 
     </li> 
     <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a> 
     </li> 
     <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a> 
     </li> 
     <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a> 
     </li> 
     <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a> 
     </li> 
     </ul> 
    </div> 
    <div class="div-right"> 
     <ul class="footer"> 
     <li><a href="http://www.stackoverflow.org">Text1</a></li> 
     <li><a href="http://www.stackoverflow.org">Text2</a></li> 
     <li><a href="http://www.stackoverflow.org">Text3</a></li> 
     <li><a href="http://www.stackflow.org">Text4</a></li> 
     </ul> 
    </div> 
    </div> 
</body>

CSS：

body{ 
    background-color: #000000; 
} 
.div-left{ 
    float:left; 
    padding-left:10px; 
} 
.div-right{ 
    float:right; 
    padding-right:10px; 
} 
.footer-container{ 
    height:40px; 
    max-width:980px; 
    border:1px solid salmon; 
    padding-top:5px; 
} 
.footer { 
    height:30px; 
    line-height:30px; 
    border:solid 1px #E5E5E5; 
} 
.footer li { 
    list-style-type:none; 
    float:left; 
    padding-left:10px; 
} 
.footer a { 
    text-decoration:none; 
    color:#0088CC; 
} 
.footer li:nth-child(1) { 
    text-decoration:none; 
    height:30px; 
    display:block; 
    background-image:url('http://s7.postimg.org/w0nt224pj/bc_separator.png'); 
    background-repeat:no-repeat; 
    background-position:right; 
    padding-right: 15px; 
} 
ul { 
    list-style-type:none; 
    padding:0px; 
    margin:0px; 
}

LIVE DEMO

來源

2013-11-01 01:51:11 xnome

CSS - 對齊兩個div左右的同一行

回答

相關問題