Question

我的页面设计需要一些独特的布局。我有几个大小各异的div元素。以下代码是页面的简化示例。

<div style="width:500px;">
  <div style="height:300px; width:100px; background-color:blue; float:left;"> </div>
  <div style="height:100px; width:300px; background-color:green; float:left;"> </div>
  <div style="height:300px; width:100px; background-color:yellow; float:left;"> </div>
  <div style="height:100px; width:100px; background-color:black; float:left;"> </div>
  <div style="height:100px; width:100px; background-color:purple; float:left;"> </div>
</div>

我可以强迫黑色和紫色div元素直接出现在绿色长div的下方和蓝色高div的左侧吗？由于它们无法容纳在第一行中，因此它们会自动移至上一个元素的下方，因此最终会位于底部。我需要它们填充绿色的div下方和蓝色的高处左侧的空间。

Answer 1

是的，如果您这样更改html逻辑：

<div style="width:500px;">
<div style="height:300px; width:100px; background-color:blue; float:left;"> </div>
<div style="float: left; display: inline-block;">
    <div style="height:100px; width:300px; background-color:green;"></div>
    <div style="height:100px; width:100px; background-color:black; float: left;"> </div>
    <div style="height:100px; width:100px; background-color:purple; float:left;"> </div>
</div>
<div style="height:300px; width:100px; background-color:yellow; float:left;"> </div>
</div>

Answer 2

如果元素是固定大小（例如100px的倍数），则CSS-Grid可以实现，但否则....您将需要JavaScript。

apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    buildToolsVersion "27.0.3"

defaultConfig {
    applicationId "com.example.fpdemo"
    minSdkVersion 21
    targetSdkVersion 27
}

buildTypes {
    repositories {
        jcenter()
        maven {
            url "https://maven.google.com"
        }
    }

    release {
        minifyEnabled false
        proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.txt'
    }
}
}
dependencies {
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation files('libs/fgtitdevice.jar')
}

.grid {
  display: grid;
  margin: 1em auto;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: repeat(6, 100px);
}

.two {
  grid-column: 2/5;
}

.four {
  grid-column: 2;
}

HTML / CSS浮动顶部和左侧

2 个答案: