显示2个div彼此相邻,并且一起大于屏幕

Question

我一直在寻找几个小时,但我找不到一种方法将2个div放在一起.当div比屏幕小时,下面的例子工作得很好但是当它们比较大时屏幕它们在彼此之下.另外我想要2页的相同课程:

• 它们都适合在屏幕上显示1页,我想将它们彼此相邻显示(左边不是一个,右边是一个)
• 另一页它们比屏幕大.(侧面滚动没问题)

举个例子:

<style>
.wrapper
{
    border:1px solid Red;
    display: inline-block;
}

.left 
{
    float:left;
    color: Green;
    border:1px solid Green;
}

.right 
{
    float:right;
    color: Blue;
    border:1px solid Blue;
}
</style>
<div class="wrapper">
    <div class="left">
        ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
    </div>
    <div class="right">
        ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
    </div>
    <div class="clear" />
</div>

在实际设计中,ASDF被一个大的替代<table>.正如我上面所说,我一直在寻找几个小时,但可以找到一个解决方案,所以如果有人问过这个我很抱歉.

Answer 1

1. 包装div对于两个排列不是必需的,但如果由于其他原因(如边框,背景等)而有,则不需要将其设置为inline-block.

2. 技术上没有什么需要漂浮.inline-block具有相同的效果,更合适.话虽如此,需要一个浮子以使物体尽可能流动,并且会在一秒钟内提到.

3. 使得这个和其他css魔术涉及内联块棘手和容易出错的东西是元素在某些方面被处理,如内联元素和其他方式,如块.这不是跨浏览器的一致性.通常,这意味着它可以具有块级样式(如边框和宽度)和内联级样式.一般来说,人们只是将它视为水平落下的块,"在一条线上".但是来自包装div的内联元素属性(例如font-size和white-space)也会生效(这很烦人).

说完所有这些,这里是并排块元素的简单配方,它超出了浏览器窗口并且位于块级包装器内:

1. 需要将内部块设置为inline-block.
2. 外部包装器需要white-space设置为nowrap,就像您希望一长串文本水平扩展到浏览器窗口之外一样.
3. 外包装需要设置为float: left; clear: both;,否则包装器的宽度不会超过窗口宽度.另一种方法是设置包装器的宽度,但是如果你不知道它将展开多远,浮动将强制包装器自动收缩或增长到它的内容的宽度.所述clear:both防止影响任何周围元件的浮动.

所以对于以下HTML:

<div class="wrapper">
    <div class="left">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
    <div class="right">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
</div>?

您需要以下CSS作为最低要求:

.wrapper {
         white-space: nowrap;
         float:left;
         clear: both;
}

.left, .right{
    display: inline-block;
}

然后,对于您的示例,您将添加:

.wrapper {
         border: 1px solid red;
}

.left 
{
    color: Green;
    border:1px solid Green;

}

.right 
{
    color: Blue;
    border:1px solid Blue;
}?

演示:http://jsfiddle.net/crazytonyi/jTknm/