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

包装div对于两个排列不是必需的，但是如果你出于其他原因（如边框，背景等），那么它不需要设置为{ {1}}。
技术上不需要漂浮。 inline-block具有相同的效果，更合适。话虽如此，需要一个浮子来使物品尽可能流动，并且会在一秒钟内提到。
使得这个和其他css魔术涉及内联块技巧和容易出错的东西是元素在某些方面被处理，如内联元素和其他方式，如块。这不是跨浏览器的一致性。通常，这意味着它可以具有块级样式（如边框和宽度）和内联级样式。一般来说，人们只是将它视为水平落下的块，“在一条线上”。但是来自包装div的内联元素属性（如font-size和white-space）也会生效（这很烦人）。

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

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

所以对于以下HTML：

clear:both

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

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

然后，对于您的示例，您将添加：

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

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

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

Answer 2

这是一种可以使用的方法，将父white-space: nowrap元素中的.wrapper与display: inline-block和.left元素中的.right结合起来：< / p>

.wrapper
{
    /* other stuff */
    white-space: nowrap;
}

.left 
{
    display: inline-block;
    /* other stuff */
}

.right 
{
    display: inline-block;
    /* other stuff */
}

JS Fiddle demo

Answer 3

嗯，你需要使用float:left来开始。然后强制overflow:show为包装器或者使用较新的CSS 3属性overflow-x:scroll。如果它仍然不起作用，请告诉我。

好的，我已经为你测试了。这不起作用的原因是因为你没有指定固定宽度和其他一些东西。这是工作代码：

<style>
.wrapper
{
    border:1px solid Red;
    width:100%;
    overflow-x:scroll;
}

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

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

然后，如果要指定宽度，请使用Javascript在页面加载时确定它们或使用CSS。

Answer 4

您可以通过将内部div设置为display: inline-block并让外部div设为white-space: nowrap而不浮动来执行此操作：

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

.wrapper { border: 1px red solid; white-space: nowrap }
.wrapper div { display: inline-block; width: 70% } /* 2*70% = 140% of .wrapper */

See it in action

小心不要在关闭第一个div和打开第二个div之间留下任何空格，因为这将在渲染中显示为可见空间。

Answer 5

你的div需要宽度，试试：

<div id="left"><p>Some content here...</p></div>
<div id="right"><p>Some content here...</p></div>

<style>
    #left, #right { float:left; color: Green; border:1px solid Green; width:49%; }
    #left { margin-right:1%; }
</style>

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

5 个答案: