5

我有两个 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;
}
4

5 回答 5

9

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

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

.moreinfo {
  display: inline-block;
}

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

于 2013-11-06T01:46:33.150 回答
2

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

于 2013-11-10T02:23:27.313 回答
0

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

body {
  min-width: 1450px;
}

这是一个小提琴

于 2013-11-06T05:28:05.153 回答
0

您编写的 css 可以正常工作以保持 div 并排，但您必须注意内部浮动 div 的宽度，它不应大于父级的宽度。
试试这个（减少更多信息的宽度只是为了演示。）：

.moreinfo{
width:150px;
height:300px;
float:left;
color:black;}
于 2013-11-06T05:07:06.543 回答
0

最好的解决方案是使用display:table并display:table-cell确保它们并排

于 2013-11-06T05:23:16.243 回答