三個div無法水平對齊

我在這裏發現另一個帖子與我有同樣的問題，除了圖像。該解決方案已經與我現有的代碼類似，我仍然無法解決問題。三個div無法水平對齊

我有3個div的有需要被定位是這樣的：

____ ____ ____ 
    ____ 
    ____

中間格是包含基本上只是乾淨的文字和HR標記一個div。最好我希望兩個divs左右擺動，以保持固定位置。而不是粘貼在這篇文章中的代碼，我已經上傳文件（只是一個索引和style.css）到這個地方：orebropartiet.se/dev/k

正如你可以看到它看起來很糟糕。爲什麼？

來源

2014-05-13 Kim Skogsmo

請不要在帖子（尤其是新用戶）鏈接到你的代碼，因爲他們可能是鏈接到垃圾郵件或惡意軟件。只需在此發佈代碼，但只發布與問題相關的代碼。 – AstroCB

@ user3630404你找到一種方法來解決它從我的答案 – mohamedrias

對不起。沒有想到與我的整個HTML頁面混淆這篇文章，將不勝感激。不知道什麼是相關或不相關的，也許有些東西我錯過了某處等等。雖然注意到！ –

#contain { 
    width: 24%; 
    line-height: 16px; 
    float: left; 
} 
#middle { 
width: 50%; 
color: white; 
display: inline-block; 
text-align: center; 
float: left; 
} 
#contain2 { 
    width: 24%; 
    line-height: 16px; 
    float: left; 
}

只是讓他們離開所有浮動，它會正常工作作爲容器#ALL有100％的寬度。爲了讓div響應不同的屏幕分辨率，我增加了百分比寬度。

<div id="all"> 

<div id="contain" style="text-align: center;"> 

    <p class="bigger">#utmanajimmie ni med!</p> 
    <hr width="250px" size="1px" color="#D88031"> 
    <p class="bigger">Dela?&nbsp; <a href="https://www.facebook.com/sharer/sharer.php?u=http://utmanajimmie.se">facebook</a> | <a href="https://twitter.com/home?status=De%20b%C3%A4sta%20motdemonstranterna%20just%20nu!%20%23utmanajimmie%20www.utmanajimmie.se">twitter</a> </p> 
    <hr width="250px" size="1px" color="#D88031"> 

</div> 

<div id="middle"> 

    <h3>Bästa motdemonstranterna just nu:</h3> 
    <h1>Uppsala</h1> 
    <p>Kul text här</p> 

</div> <!-- wrapper --> 

     <div id="contain2" style="margin-top: 50px"> 

     <fieldset id="contact_form"> 
     <legend><p class="bigger">Nominera och rösta!</p></legend> 
     <div id="result"></div> 
      <label for="name"><span></span> 
      <input type="text" name="name" id="name" placeholder="Namn"> 
      </label> 

      <label for="email"><span></span> 
      <input type="email" name="email" id="email" placeholder="E-post"> 
      </label> 

      <label for="message"><span></span> 
      <textarea name="message" id="message" placeholder="Din röst eller nominering! Motivera gärna med beskrivning och nyhetsartiklar."></textarea> 
      </label> 

      <label><span>&nbsp;</span> 
      <button class="submit_btn" id="submit_btn">Skicka</button> 
      </label> 
     </fieldset> 

     </div> <!-- contain2 --> 

</div>

來源

2014-05-13 02:01:59 mohamedrias

它的工作！顯然，從像素變化到百分之百，使它神奇地工作，即使是浮動：右邊的div。非常感激！在來這裏之前，盯着這裏差不多一個小時。 –

歡迎您:)是的，當你提到百分比的div時，float：right或float：left到最後一個div除了中間div和最後一個div之間的填充沒有多大區別。當你爲每個div分配一些背景顏色時你會注意到這個差距 – mohamedrias

是的，我注意到了。我現在將很多高度/寬度度量值切換到了％，它似乎總體上工作得更好。我還使用背景顏色來查看div位置對我有利的位置，並使左浮動框和中間的框通過不同的顏色「連接」！我在原始文章中提供的相同鏈接以新外觀更新。再次感謝您的幫助，％非常流暢！ –

三個div無法水平對齊

回答

相關問題