Html 三个div无法水平对齐

我在这里发现了另一个帖子，其中有人和我有同样的问题，除了图片。该解决方案已经与我现有的代码类似，我仍然无法修复该问题

我有3个部门需要这样定位：

____ ____ ____
     ____ 
     ____

中间的div基本上只包含干净的文本和HR标记。我希望左/右浮动的两个div处于固定位置。 我没有在本文中粘贴大量代码，而是将文件（仅一个索引和一个style.css）上传到以下位置：orebropartiet.se/dev/k

正如你所看到的，它看起来很糟糕。为什么?

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

只要让它们都向左浮动，就可以了，因为你的容器都有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>

#乌特马纳吉米医学院

德拉


Bästa Motdemonsterna just nu：
乌普萨拉
库尔文本här

Nominera och rösta
斯奇卡

请不要在帖子中包含指向您代码的链接（尤其是作为新用户），因为它们可能是指向垃圾邮件或恶意软件的链接。只需在此处发布代码，但只发布与问题相关的代码。@user3630404您可以从我的回答中找到解决问题的方法。对此，我深表歉意。我不认为把这篇文章和我的整个html页面混在一起会很感激。不知道什么是相关的或不相关的，可能是我遗漏了什么等等。。注意到了@用户3630404不是问题；如果这是一个有用的问题（例如，涉及一些修补），a可能会有帮助，但您仍然需要在问题中包含代码。它成功了！很明显，从像素到%的变化让它神奇地自行解决了问题，即使使用float：在右边的div上。非常感谢！在来到这里之前，我盯着它看了将近一个小时。不客气：）是的，当你提到以百分比表示的div时，float:right或float:left到最后一个div除了中间div和最后一个div之间的填充之外没有什么区别。我注意到，当你给每一位女士加上一些背景色时，你会注意到这个差距。我现在把很多高度/宽度的测量值改成了%，总体上看起来效果更好。我还使用了背景色来查看div的位置，并通过不同的颜色将左侧浮动框和中间框“连接”起来！我在原始帖子中提供的相同链接也用新外观进行了更新。再次感谢你的帮助，你的工作顺利多了！