Question

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

我有3个div需要像这样定位：

____ ____ ____
     ____ 
     ____

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

你可以看到它看起来很糟糕。为什么呢？

Answer 1

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

三个div无法水平对齐

1 个答案: