Question

我应该对齐固定宽度的格。

我有一个宽度固定的容器

我内部有动态div，但它们也有固定的宽度。

我想每行放置4个div。

所以我用了CSS的float规则

我的实际问题是，当该行上的最后一个div（卡片）的高度较短时，下一张卡片就会进入其下。

我希望下一个div返回整行。

.card {
  width:200px;
  height:200px;
  border: 1px solid black;
  float: left;
}
.container {
  width: 900px;
}
.shortcard {
  height:50px
}

<div class="container">
  <div class="card">

</div>
<div class="card">

</div>
<div class="card">

</div>
<div class="card shortcard">

</div>
<div class="card">
It should be in next line
</div>
<div class="card">

</div>
</div>

当高度更长时，元素将移至另一行

.card {
  width:200px;
  height:200px;
  border: 1px solid black;
  float: left;
}
.container {
  width: 900px;
}
.shortcard {
  height:50px
}

<div class="container">
  <div class="card">

</div>
<div class="card">

</div>
<div class="card">

</div>
<div class="card ">

</div>
<div class="card">
I'm ok here
</div>
<div class="card">

</div>
</div>

Answer 1

我认为您要实现的目标是，您不希望长div落在短div之下。因此，您必须将inline-block与float: left一起使用

.card {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  display: inline-block; /* to line up the divs in a single line */
  float:left; /* to make them stick to the top */
}

.card {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  display: inline-block;
  float: left;
}

.container {
  width: 100%;
}

.shortcard {
  height: 50px;
}

body,
html {
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
}

<div class="container">

  <div class="card">

  </div>
  <div class="card">

  </div>
  <div class="card">

  </div>
  <div class="card shortcard">

  </div>
  <div class="card containerdivNewLine">
    beside short div but not under it
  </div>
  <div class="card">

  </div>

</div>

Answer 2

好的，我会尝试在您的代码中修复此问题，以便您更好地理解！

因此，基本更改是CSS，创建一个新的类.container并使用display: flex属性。

看看：

<div class="container">
    <div class="card">
    </div>
    <div class="card">
    </div>
    <div class="card">
    </div>
    <div class="card">
    </div>
    <div class="card">
    I'm ok here
    </div>
    <div class="card">
    </div>
</div>

.card {
  width:200px;
  height:200px;
  border: 1px solid black;
  display: inline-flex;
}

.container
{
  display: flex;
  width: 900px;
}

.card {
  width:200px;
  height:200px;
  border: 1px solid black;
  display: inline-flex;
}

.container
{
  display: flex;
  width: 900px;
}

<div class="container">
    <div class="card">
    </div>
    <div class="card">
    </div>
    <div class="card">
    </div>
    <div class="card">
    </div>
    <div class="card">
    I'm ok here
    </div>
    <div class="card">
    </div>
</div>

运行代码，让我知道您是否想要这样的设计？

使用左浮动时返回到行

2 个答案: