如何始终保持两个div并排

Question

我有两个div左移.我真的不想使用绝对位置,是否有另一种方法来保持并排而不使用绝对位置？或者这是唯一的方法吗？

<div class="moreinfo" id="darkgray">
            <p>
                Today, hate speech continues to profilerate throughout the Internet, normalized in the form of YouTube comments, animated GIFs, and tweets. Online anonymity affords users a sense of security that fosters a culture of cruelty and bigotry. Our goal is to create a conversation about the consequences of hateful speech that rethinks how we communicate online. Social media is full of positive potential; we can tap into it by holding each other accountable.
            </p>
        </div>
        <div class="moreinfo" id="lightgray">
            <h2>
                "WE NEED TO TEACH OUR CHILDREN NOT TO STAND SILENTLY BY WHILE OTHERS ARE BEING TORMENTED. IN THE END, THEY WILL BE SAFER ONLINE &amp; OFFLINE."
                <a href="#">READ ARTICLE BY WIRED SAFETY</a>
            </h2>
        </div>
        <div class="clear"></div>

CSS

.moreinfo{
    width:715px;
    height:250px;
    float:left;
    color:white;
}

Answer 1

您可以使用display: inline-block它们并排放置.

这是一个例子:http://jsfiddle.net/2sZCb/

.moreinfo {
  display: inline-block;
} 

这是一篇关于你所遇到的同一个问题的好文章:http: //designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Answer 2

我注意到的最好方法是对两者的宽度都使用百分之 50%