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％作为两者的宽度

Answer 3

你写的css是正确地保持div并排工作，但是你必须对内浮动div的宽度采取预防措施，它不应该大于父亲的宽度。
试试这个（只为演示减少moreinfo的宽度。）：

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

Answer 4

最佳解决方案是使用display:table和display:table-cell来确保它们并排

Answer 5

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

body {
  min-width: 1450px;
}

Here's a fiddle

如何始终保持两个div并排

5 个答案: