如何始终让两个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;
}

- Naomi K

---

display: inline-block 可能会对您有所帮助。 - Konsole

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/

- Mingle

---

感谢您的文章，非常棒。然而，添加"display:inline-block;"并没有解决问题，它只能与百分比一起使用吗？我不想让它们缩放，我宁愿让窗口将其裁剪掉。 - Naomi K

Answer 2

我注意到最好的方法是使用百分之五十的宽度来同时适用于两个元素。

- Naomi K

---

请将得票最高的答案标记为正确答案。那是一个更好、更完整的答案。 - Nilanshu Jaiswal

Answer 3

最佳解决方案是使用 display:table 和 display:table-cell，以确保它们并排放置。

- Super Hornet

---

这个存在兼容性问题。虽然受影响的比例不是很大，但那些使用IE7及以下版本的用户会受到影响。http://caniuse.com/css-table - Deryck

哈哈，我刚才在脑海中阅读那段文字时感觉非常有趣。标点符号让人兴奋不已。 - Deryck

Answer 4

你写的 CSS 正确地使 div 并排，但是你必须注意内部浮动 div 的宽度不应大于父元素的宽度。
试试这个（缩小 moreinfo 的宽度作为演示）：

.moreinfo{
width:150px;
height:300px;
float:left;
color:black;}

- BhushanK

Answer 5

将包含元素的宽度设置为足够大，以容纳您想要的方式。

body {
  min-width: 1450px;
}

这里有一个小例子

- Deryck