Question

通常，如果你有一个固定宽度和自动高度的div，你加入它，具有定义的宽度和高度和内联块显示的对象，它们会在div中相互并排添加，直到它超出宽度并且高度比自动增加，以便它们可以容纳在下面。

我想找出一种方法来扭转这种功能。具有固定高度和自动宽度的div。当对象（具有定义的宽度和高度以及内联块显示）被添加到它时，它们被添加到彼此之下，直到div超出高度，然后宽度自动增加以从右上方容纳它们。我尝试了下面的示例，但它没有用。

css（没有用）

.div {

    height:300px;
    width:auto;

}

宽度没有增加，导致div垂直溢出。虽然我不记得上次见过它，但我知道我想要做的事情很常见。也许它需要javascript。我对任何事情都持开放态度。有人可以帮忙吗？

Answer 1

这是flexbox派上用场的一个很好的例子：

Error:Could not resolve all dependencies for configuration ':app:prodDebugCompileClasspath'.
Cannot choose between the following configurations on project :util:
  - devDebugApiElements
  - devReleaseApiElements
  - prodDebugApiElements
  - prodReleaseApiElements
All of them match the consumer attributes:
  - Configuration 'devDebugApiElements':
      - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'AndroidTypeAttr{name=Aar}' but no value provided.
      - Found com.android.build.gradle.internal.dependency.AndroidTypeAttr 'AndroidTypeAttr{name=Aar}' but wasn't required.
      - Required com.android.build.gradle.internal.dependency.BuildTypeAttr 'BuildTypeAttr{name=debug}' but no value provided.
      - Found com.android.build.gradle.internal.dependency.BuildTypeAttr 'BuildTypeAttr{name=debug}' but wasn't required.
      - Found com.android.build.gradle.internal.dependency.VariantAttr 'VariantAttr{name=devDebug}' but wasn't required.
      - Required myflavor 'ProductFlavorAttr{name=prod}' but no value provided.
      - Found myflavor 'ProductFlavorAttr{name=dev}' but wasn't required.
      - Required org.gradle.api.attributes.Usage 'for compile' and found compatible value 'for compile'.
  - Configuration 'devReleaseApiElements':
      - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'AndroidTypeAttr{name=Aar}' but no value provided.
      - Found com.android.build.gradle.internal.dependency.AndroidTypeAttr 'AndroidTypeAttr{name=Aar}' but wasn't required.
      - Required com.android.build.gradle.internal.dependency.BuildTypeAttr 'BuildTypeAttr{name=debug}' but no value provided.
      - Found com.android.build.gradle.internal.dependency.BuildTypeAttr 'BuildTypeAttr{name=release}' but wasn't required.
      - Found com.android.build.gradle.internal.dependency.VariantAttr 'VariantAttr{name=devRelease}' but wasn't required.
      - Required myflavor 'ProductFlavorAttr{name=prod}' but no value provided.
      - Found myflavor 'ProductFlavorAttr{name=dev}' but wasn't required.
      - Required org.gradle.api.attributes.Usage 'for compile' and found compatible value 'for compile'.
  - Configuration 'prodDebugApiElements':
      - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'AndroidTypeAttr{name=Aar}' but no value provided.
      - Found com.android.build.gradle.internal.dependency.AndroidTypeAttr 'AndroidTypeAttr{name=Aar}' but wasn't required.
      - Required com.android.build.gradle.internal.dependency.BuildTypeAttr 'BuildTypeAttr{name=debug}' but no value provided.
      - Found com.android.build.gradle.internal.dependency.BuildTypeAttr 'BuildTypeAttr{name=debug}' but wasn't required.
      - Found com.android.build.gradle.internal.dependency.VariantAttr 'VariantAttr{name=prodDebug}' but wasn't required.
      - Required myflavor 'ProductFlavorAttr{name=prod}' but no value provided.
      - Found myflavor 'ProductFlavorAttr{name=prod}' but wasn't required.
      - Required org.gradle.api.attributes.Usage 'for compile' and found compatible value 'for compile'.
  - Configuration 'prodReleaseApiElements':
      - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'AndroidTypeAttr{name=Aar}' but no value provided.
      - Found com.android.build.gradle.internal.dependency.AndroidTypeAttr 'AndroidTypeAttr{name=Aar}' but wasn't required.
      - Required com.android.build.gradle.internal.dependency.BuildTypeAttr 'BuildTypeAttr{name=debug}' but no value provided.
      - Found com.android.build.gradle.internal.dependency. 'BuildTypeAttr{name=release}' but wasn't required.
      - Found com.android.build.gradle.internal.dependency.VariantAttr 'VariantAttr{name=prodRelease}' but wasn't required.
      - Required myflavor 'ProductFlavorAttr{name=prod}' but no value provided.
      - Found myflavor 'ProductFlavorAttr{name=prod}' but wasn't required.
      - Required org.gradle.api.attributes.Usage 'for compile' and found compatible value 'for compile'.

.testbox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 300px;
  background: chocolate;
}

.item {
  width: 100px;
  height: 120px;
  margin: 15px;
  background: beige;
}

Answer 2

不需要Javascript，我们可以使用CSS列进行此操作。

在您的父元素上，设置最大宽度，并指定列宽（您可能需要包含供应商前缀）

.parent {
   width: 300px;
  -moz-column-width: 100px;
  -webkit-column-width: 100px;
  column-width: 100px;
  height: 200px;
}

示例jsfiddle：

https://jsfiddle.net/3s8007kb/

如何为包含带有内嵌块显示的对象的div设置固定高度和自动宽度？

2 个答案: