Question

我有当前的jsfiddle

我想在其中包含一个scroll-x而不是wrap：

+----------------------------------+
|+---------+ +--------------------+|
||  33%    | |  width: normally   ||
||         | |  66%; otherwise    ||
|| min:    | |  min-width:600px   ||
||   300px | |                    ||
|+---------+ +--------------------+|
+----------------------------------+
|<|                 |=|          |>|
+----------------------------------+

这样，只有当我输入的文本数量不同时，潜水才会与顶部对齐：

相反：

+----------------------------------+
|+---------+                       |
||         |                       |
||         | +--------------------+|
||         | |                    ||
||         | |                    ||   <----  I get something like this
|+---------+ +--------------------+|
+----------------------------------+
|<|                 |=|          |>|          
+----------------------------------+

是否有一种万无一失的方法可以确保（相反）它们如下：

+----------------------------------+
|+---------+ +--------------------+|
||         | |                    ||
||         | |                    ||
||         | +--------------------+|
||         |                       |   
|+---------+                       |
+----------------------------------+
|<|                 |=|          |>|          
+----------------------------------+

我的css看起来像：

.firstDiv{
    display:inline-block;
    min-width:300px; 
    width:33%;
    background-color:red; 
    white-space:normal;
}
.secondDiv{
    display:inline-block;
    min-width:600px; 
    width:66%;
    background-color:orange; 
    white-space:normal;
}

.parent{
    overflow-x:scroll; 
    white-space:nowrap; 
    background-color:blue;
    height:400px; 
    width:100%; 
    top:0;
}

有什么建议吗？

修改

我忘了提及我的内容也会低于它，例如：

+----------------------------------+
|+---------+ +--------------------+|
||         | |                    ||
||         | |                    ||
||         | +--------------------+|
||         |                       |   
|+---------+                       |
|+---------+ +--------------------+|
||         | |                    ||
|+---------+ +--------------------+|
+----------------------------------+
|<|                 |=|          |>|          
+----------------------------------+

等。

Answer 1

为这些div应用vertical-align: top;：

.firstDiv{
    display:inline-block;
    min-width:300px; 
    width:33%;
    background-color:red; 
    white-space:normal;
    vertical-align: top;
}
.secondDiv{
    display:inline-block;
    min-width:600px; 
    width:66%;
    background-color:orange; 
    white-space:normal;
    vertical-align: top;
}

demo

check this demo with your updated question：在第二个div之后我使用clear: both;将它们放在下面。

Answer 2

您可以在vertical-align: top元素

添加firstDiv

.firstDiv{
    display:inline-block;
    min-width:300px; 
    width:33%;
    background-color:red; 
    white-space:normal;
    vertical-align: top;
}

示例：http://jsfiddle.net/dkyzavj6/1/

兄弟姐妹容器未正确对齐的意外结果

2 个答案: