代码之家 › 专栏 › 技术社区 › xianshenglu

如何让浮动项目平均分割空白区域?

css-float grid css html javascript

0

xianshenglu · 技术社区 · 5 年前

请运行此演示:

.app {
  background:pink;
  width: 90vw;
  overflow: hidden;
}
.app__item {
  background: lightblue;
  width: 200px;
  float :left;
  margin:5px;
  height: 40px;
}
.app__item:last-child {
  float: right;
}
.app__item--size2 {
  height: 90px;
}

<div class="app">
  <div class="app__item app__item--size2">1</div>
  <div class="app__item">2</div>
  <div class="app__item">3</div>
  <div class="app__item">4</div>
  <div class="app__item">5</div>
  <div class="app__item">6</div>
  <div class="app__item">7</div>
  <div class="app__item">8</div>
  <div class="app__item">9</div>
  <div class="app__item">10</div>
  <div class="app__item">
    <button>search</button>
  </div>
</div>

请注意我想要的红色文本:

如何让浮动项目平均分割空白区域?

这个gif指出了我想要什么,以及我使用浮动布局的原因。

如果使用flex,结果将是

.app {
  background:pink;
  width: 80vw;
  display: flex;
  flex-flow: row wrap;
}
.app__item,
.app__item_wrapper {
    margin:5px;    
  width: 200px;
  flex: 0 0 auto;
}
.app__item {
  background: lightblue;
  height: 40px;
}
.app__item_wrapper {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.app__item--size2 {
  height: 90px;
}
.app__item--inner {
  margin:0;
  flex: 0 0 auto;
}

<div class="app">
  <div class="app__item app__item--size2">1</div>
  <div class=" app__item_wrapper app__item--size2">
    <div class="app__item app__item--inner">2</div>
    <div class="app__item app__item--inner">3</div>
  </div>
  <div class=" app__item_wrapper app__item--size2">
    <div class="app__item app__item--inner">4</div>
    <div class="app__item app__item--inner">5</div>
  </div>

  <div class="app__item">6</div>
  <div class="app__item">7</div>
  <div class="app__item">8</div>
  <div class="app__item">
    <button>search</button>
  </div>
</div>

缺点是,当视口发生变化时,它不会很好地工作。看看这个:

这是个骗局:

1 回复 | 直到 5 年前

1

1

Dacre Denny 5 年前

如果我理解正确,您希望“cell 1”右侧的单元格拉伸,以填充封闭div的水平空间(带粉色背景)。

你可以用 CSS Grid 要实现这一点,如下所示:

.app {
  background:pink;
  width: 90vw;
  padding:5px;
  
  display:grid;
  
  /* Cause first column with to be 200px, remaining two columns
  to scale to fit remaining width */
  grid-template-columns: 200px repeat(2, 1fr);
  
  /* Set spacing between cells */
  grid-gap:10px;
}
.app__item {
  
  background: lightblue;
  width: 100%;
  height: 40px;
} 
.app__item--size2 {
  /* Cause top left cell to occupy two rows */
  grid-row: 1 / 3;
  height:100%;
}

<div class="app">
  <div class="app__item app__item--size2">1</div>
  <div class="app__item">2</div>
  <div class="app__item">3</div>
  <div class="app__item">4</div>
  <div class="app__item">5</div>
  <div class="app__item">6</div>
  <div class="app__item">7</div>
  <div class="app__item">8</div>
  <div class="app__item">9</div>
  <div class="app__item">10</div>
  <div class="app__item">
    <button>search</button>
  </div>
</div>

2

0

xianshenglu 5 年前

谢谢@Dacre Denny给了我灵感。终于,我明白了。

.app {
  background:pink;
  width: 90vw;
  padding:5px;
  
  display:grid;
  grid-template-columns: repeat(auto-fit,200px);
  justify-content:space-evenly;
  grid-gap: 5px;
}
.app__item {  
  background: lightblue;
  width: 200px;
  height: 40px;
} 
.app__item--size2 {
  /* Cause top left cell to occupy two rows */
  grid-row: 1 / 3;
  height:100%;
}
.app__item:last-child {
  grid-column-end: -1
}

<div class="app">
  <div class="app__item app__item--size2">1</div>
  <div class="app__item">2</div>
  <div class="app__item">3</div>
  <div class="app__item">4</div>
  <div class="app__item">5</div>
  <div class="app__item">6</div>
  <div class="app__item">7</div>
  <div class="app__item">8</div>
  <div class="app__item">9</div>
  <div class="app__item">10</div>
  <div class="app__item">
    <button>search</button>
  </div>
</div>

当视口发生变化时,请查看此gif。

推荐文章

H. Saleh · 浮动:左:溢出时项目消失

7 年前

Christine · 菜单项向左和向下浮动

7 年前

MyDaftQuestions · 如何强制HTML元素左对齐而不换行

7 年前

JBH · 如何防止对象缠绕浮动图像?

7 年前

Joe Harvey · Div隐藏在Chrome中

7 年前

Rusletov · 使元素与浮动元素的边界相邻

7 年前

Lion King · 使用“float”时会出现不需要的空格

7 年前

Ashley · CSS浮动设置为右,但左浮动[重复]

8 年前

JDS · 如何使两个图像按钮超链接并排占据全屏?

8 年前

Russel Riehle · 如何基于父项的右边缘打开超出的子菜单区域?

8 年前

关于移动版

代码之家 - 一站式码农服务社区

沪ICP备11025650号