Question

我正在尝试创建1个div，右侧旁边有2个堆叠的div。我已设法编写以下代码，但我无法将绿色框对齐在红色框下方，目前这似乎超出了所需区域。

我的HTML：

 COLUMN
 ======
 100
 50

 25
 100

 NULL <-- Note that it was blank in Excel
 75
 100
 100

我的CSS：

<div id="blue"></div>
<div id="red"></div>
<div id="green"></div>

如果有人能就我如何解决这个问题提出建议，我真的很感激。

提前致谢。

Answer 1

对于apply plugin: 'com.android.application' android { compileSdkVersion 23 buildToolsVersion "21.1.2" defaultConfig { multiDexEnabled true applicationId "com.tubbs.citychurchob" minSdkVersion 14 targetSdkVersion 23 versionCode 1 versionName "1.0" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile fileTree(dir: 'libs', include: 'Parse-*.jar') compile 'com.android.support:appcompat-v7:23.1.0' compile 'com.android.support:cardview-v7:23.1.0' compile 'com.parse.bolts:bolts-android:1+' compile 'com.android.support:recyclerview-v7:23.1.0' }，将#green更改为clear: both;。瞧！看到这个小提琴：http://jsfiddle.net/ru1vpox8/。

问题在于清除两者都将其移动到红色和蓝色div下方。但是，将其更改为仅在右侧清除它允许它仍然与蓝色div处于同一水平，但强制它低于红色div的水平。

Answer 2

迈克尔，也许这就是你要找的东西？

＆＃13;

.wrapper {
  width: 200px;
}

#blue {
width: 100px;
height: 100px;
background: blue;
float: left;
} 

#red {
width: 100px;
height: 50px;
background: red;
float: left;
}

#green {
width: 100px;
height: 50px;
background: green;
float: left;
}

＆＃13;

<div class="wrapper">
  <div id="blue"></div>
  <div id="red"></div>
  <div id="green"></div>
</div>

＆＃13;

1个div旁边有2个堆叠的div

2 个答案: