Question

我如何创建3 div，div1，最大宽度为1280px，div2和div3，固定宽度（34px和311px），它们之间有一些空间。我需要创建一个像这样的效果

---------------------------- ---- -----------
| div1 | | DIV2 | | DIV3 |
---------------------------- ---- -----------

和div1可以在窗口调整大小时更改其宽度。父容器是1650px。

Answer 1

您可以通过反转容器的流量来使用浮动属性。

或者使用HTML <table>使用的显示属性。（没有什么比说使用表;）

HTML

<div id="tablelike"><!-- make these div behave like table and td elements -->
  <div class="div1">A</div>
  <div class="div2">B</div>
  <div class="div3">C</div>
</div>
<!-- reverse flow to use float properties -->
<div id="floatchild">
  <div class="div3">C</div>
  <div class="div2">B</div>
  <div class="div1">A</div>
</div>

CSS

#tablelike {
  display:table;
  width:100%;
    border-spacing:0.5em;
}
#tablelike, #floatchild {
  max-width:1650px;

}
#tablelike > div {
  display:table-cell;
}
.div1 {
 /* take space left */
    border:solid 1px;
}
.div2 {
  width:34px;
    border:solid 1px;
}
.div3 {
  width:311px;
    border:solid 1px;
}
#floatchild {
  padding-right:0.5em;
}
#floatchild > div {
  margin:0 0 0 0.5em;
  overflow:hidden;
}
#floatchild .div2, #floatchild .div3 {
  float:right;
}

行为不同，非浮动元素上的浮动和布局只要有足够的空间，就可以让元素彼此站在一边。

表属性将在同一行上保留3个元素，宽度相同，但可以允许每个元素在CSS中声明的大小上增长。

http://codepen.io/gc-nomade/pen/EmlhB

Answer 2

当窗口重新调整大小时，固定的像素大小不会为您提供流畅的结构。

像这样使用

.div1 {
  width: 70%;
  float:left;
  display:block;
  } 

.div2 {
  width: 5%;
  float:left;
  display:block;
  } 

.div3 {
  width: 20%;
  float:left;
  display:block;
  }

希望帮助这个

Div宽度可变

2 个答案: