1

我一直在寻找几个小时，但我找不到将 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>. 正如我上面所说，我一直在寻找几个小时，但可以找到一个解决方案，所以如果之前有人问过这个问题，我很抱歉。

4

5 回答 5

6

  1. 包装器 div 不是将两者对齐所必需的，但如果您出于其他原因（如边框、背景等）使用它，则不需要将其设置为inline-block.

  2. 从技术上讲，没有什么需要浮动。inline-block具有相同的效果，更合适。话虽如此，需要一个浮动来使事情尽可能流畅，稍后会提到。

  3. 使这个和其他涉及 inline-block 的 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/

于 2012-04-20T10:59:30.037 回答
2

这是一种可以使用的方法，将white-space: nowrap父.wrapper元素与display: inline-block子元素.left和.right元素耦合：

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

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

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

JS 小提琴演示。

于 2012-04-20T10:40:02.323 回答
0

呃，你需要同时使用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。

于 2012-04-20T10:37:27.743 回答
0

您可以通过将内部 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 */

看到它在行动。

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

于 2012-04-20T10:40:23.460 回答
0

您的 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>
于 2012-04-20T11:01:37.347 回答