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

2个分区之间的分区填充空间

between fill space html

1

user3519221 · 技术社区 · 11 年前

如何使所有div都位于同一行,并填充div#2左浮动div#1和右浮动div#3之间的空间? Question

3 回复 | 直到 11 年前

1

4

Miaonster 11 年前

大概 flex 会帮你的,这里有一个 JSFiddle .

HTML格式

<div class="parent">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</div>

CSS格式

.parent {
    display: -webkit-flex;
    display: flex;
}
.div1 {
    width: 30px;
    height: 30px;
    background: #FFCC99;
}
.div3 {
    width: 30px;
    height: 30px;
    background: #FCF305;
}
.div2 {
    -webkit-flex: auto;
    flex: auto;
    height: 30px;
    background: #CCFFCC;
}

2

1

jbutler483 shennan 11 年前

你可以使用 display: table 对于这种实现( 笔记这不是使用表格进行布局):

html,
body {
  margin: 0;
  padding: 0;
}
.wrap {
  display: table;
  width: 100vw;
}
.one {
  display: table-cell;
  height: 50px;
  width: 20%;
  background: red;
}
.two {
  display: table-cell;
  height: 50%;
  width: 60%;
  background: cornflowerblue;
}
.three {
  display: table-cell;
  background: lime;
  height: 50px;
}

<div class="wrap">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

请注意,我没有在最后一个元素上设置宽度,但它填充了剩余的可用空间?

3

0

mehulmpt 11 年前

下面是一个虚拟实现:

<div id="l"></div>

<div id="r"></div>

<div id="c"></div>

<style>
#l {
float: left;
width:30%;
}
#r { 
float: right;
width: 30%;
}
#c {
margin: 0 auto;
width: 40%;
}
</style>