浮动div使它们彼此相邻排列

时间：2015-07-29 09:55:50

标签： html css

我有40个div，我想创建一个包含8列和5行的网格。这是最基本的事情，但对于上帝的爱，我无法使它们正确对齐。

这是我想要实现的目标：

enter image description here

这是我的jsFiddle：
https://jsfiddle.net/GY22/ou7t1osd/

代码：

.colorPickerWrapper {
  width: 450px;
  height: 285
}
.color-tile {
  cursor: pointer;
  width: 55px;
  height: 55px;
}
.color-1 {
  background-color: #ff43ad;
}
.color-2 {
  background-color: #f8e928;
}
.color-3 {
  background-color: #99fa42;
}
.color-4 {
  background-color: #5eacfc;
}
.color-5 {
  background-color: #cdcdcd;
}
.color-6 {
  background-color: #9e72bd;
}
.color-7 {
  background-color: #bb85e1;
}
.color-8 {
  background-color: #c8a0e4;
}
.color-9 {
  background-color: #e1c3f6;
}
.color-10 {
  background-color: #efdbfd;
}
.color-11 {
  background-color: #7d8ec6;
}
.color-12 {
  background-color: #94a6e3;
}
.color-13 {
  background-color: #aabaed;
}
.color-14 {
  background-color: #c1cdf6;
}
.color-15 {
  background-color: #dce4fc;
}
.color-16 {
  background-color: #66bcb5;
}
.color-17 {
  background-color: #88d8d2;
}
.color-18 {
  background-color: #a4e3de;
}
.color-19 {
  background-color: #b9f1ec;
}
.color-20 {
  background-color: #d6f9f7;
}
.color-21 {
  background-color: #59b660;
}
.color-22 {
  background-color: #7cd680;
  width: 55px;
  height: 55px;
}
.color-23 {
  background-color: #9aeea0;
}
.color-24 {
  background-color: #b8f0bd;
}
.color-25 {
  background-color: #cdfcd0;
}
.color-26 {
  background-color: #c4b714;
}
.color-27 {
  background-color: #ded237;
}
.color-28 {
  background-color: #ece162;
}
.color-29 {
  background-color: #fcf27b;
}
.color-30 {
  background-color: #fdf6a6;
}
.color-31 {
  background-color: #d87944;
}
.color-32 {
  background-color: #f1925b;
}
.color-33 {
  background-color: #f9a97b;
}
.color-34 {
  background-color: #f5c0a1;
}
.color-35 {
  background-color: #fddbc0;
}
.color-36 {
  background-color: #df5755;
}
.color-37 {
  background-color: #fa777e;
}
.color-38 {
  background-color: #f7989d;
}
.color-39 {
  background-color: #f8b0af;
}
.color-40 {
  background-color: #f9c9c8;
}
<div class="colorPickerWrapper">
  <div class="color-1 color-tile"></div>
  <div class="color-2 color-tile"></div>
  <div class="color-3 color-tile"></div>
  <div class="color-4 color-tile"></div>
  <div class="color-5 color-tile"></div>
  <div class="color-6 color-tile"></div>
  <div class="color-7 color-tile"></div>
  <div class="color-8 color-tile"></div>
  <div class="color-9 color-tile"></div>
  <div class="color-10 color-tile"></div>
  <div class="color-11 color-tile"></div>
  <div class="color-12 color-tile"></div>
  <div class="color-13 color-tile"></div>
  <div class="color-14 color-tile"></div>
  <div class="color-15 color-tile"></div>
  <div class="color-16 color-tile"></div>
  <div class="color-17 color-tile"></div>
  <div class="color-18 color-tile"></div>
  <div class="color-19 color-tile"></div>
  <div class="color-20 color-tile"></div>
  <div class="color-21 color-tile"></div>
  <div class="color-22 color-tile"></div>
  <div class="color-23 color-tile"></div>
  <div class="color-24 color-tile"></div>
  <div class="color-25 color-tile"></div>
  <div class="color-26 color-tile"></div>
  <div class="color-27 color-tile"></div>
  <div class="color-28 color-tile"></div>
  <div class="color-29 color-tile"></div>
  <div class="color-30 color-tile"></div>
  <div class="color-31 color-tile"></div>
  <div class="color-32 color-tile"></div>
  <div class="color-33 color-tile"></div>
  <div class="color-34 color-tile"></div>
  <div class="color-35 color-tile"></div>
  <div class="color-36 color-tile"></div>
  <div class="color-37 color-tile"></div>
  <div class="color-38 color-tile"></div>
  <div class="color-39 color-tile"></div>
  <div class="color-40 color-tile"></div>
</div>

6 个答案:

答案 0 :(得分：2)

flex-box是一个解决方案：）

https://jsfiddle.net/1yrm5u29/ 

.colorPickerWrapper{
    width: 450px;
    height: 285;
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
}

答案 1 :(得分：1)

试试这个：

<强> HTML 

  <div class="colorPickerWrapper">

      <div class="column">
    <div class="color-1 color-tile"></div>
    <div class="color-2 color-tile"></div>
    <div class="color-3 color-tile"></div>
    <div class="color-4 color-tile"></div>
    <div class="color-5 color-tile"></div>
      </div>
      <div class="column">
    <div class="color-6 color-tile"></div>
    <div class="color-7 color-tile"></div>
    <div class="color-8 color-tile"></div>  
    <div class="color-9 color-tile"></div>
    <div class="color-10 color-tile"></div>
      </div>
       <div class="column">
    <div class="color-11 color-tile"></div>
    <div class="color-12 color-tile"></div>
    <div class="color-13 color-tile"></div>
    <div class="color-14 color-tile"></div>
    <div class="color-15 color-tile"></div>
      </div>
      <div class="column">
    <div class="color-16 color-tile"></div>
    <div class="color-17 color-tile"></div>
    <div class="color-18 color-tile"></div>
    <div class="color-19 color-tile"></div>
    <div class="color-20 color-tile"></div>
      </div>
      <div class="column">
    <div class="color-21 color-tile"></div>
    <div class="color-22 color-tile"></div>
    <div class="color-23 color-tile"></div>
    <div class="color-24 color-tile"></div>
    <div class="color-25 color-tile"></div>
      </div>
      <div class="column">
    <div class="color-26 color-tile"></div>
    <div class="color-27 color-tile"></div>
    <div class="color-28 color-tile"></div>
    <div class="color-29 color-tile"></div>
    <div class="color-30 color-tile"></div>
      </div>
      <div class="column">
    <div class="color-31 color-tile"></div>
    <div class="color-32 color-tile"></div>
    <div class="color-33 color-tile"></div>
    <div class="color-34 color-tile"></div>
    <div class="color-35 color-tile"></div>
      </div>
      <div class="column">
    <div class="color-36 color-tile"></div>
    <div class="color-37 color-tile"></div>
    <div class="color-38 color-tile"></div>
    <div class="color-39 color-tile"></div>
    <div class="color-40 color-tile"></div>
      </div>

  </div>

<强> CSS 

.colorPickerWrapper{
    width: 450px;
    height: 285
}

.color-tile{
    cursor: pointer;
    width: 55px;
    height: 55px;
}

.column{
     display: inline-block;
    vertical-align: top;
    float:left;
}

.color-1 {
    background-color: #ff43ad;
}

.color-2 {
    background-color: #f8e928;
}

.color-3 {
    background-color: #99fa42;
}

.color-4 {
    background-color: #5eacfc;
}

.color-5 {
    background-color: #cdcdcd;
}

.color-6 {
    background-color: #9e72bd;
}

.color-7 {
    background-color: #bb85e1;
}

.color-8 {
    background-color: #c8a0e4;
}

.color-9 {
    background-color: #e1c3f6;
}

.color-10 {
    background-color: #efdbfd;
}

.color-11 {
    background-color: #7d8ec6;
}

.color-12 {
    background-color: #94a6e3;
}

.color-13 {
    background-color: #aabaed;
}

.color-14 {
    background-color: #c1cdf6;
}

.color-15 {
    background-color: #dce4fc;
}

.color-16 {
    background-color: #66bcb5;
}

.color-17 {
    background-color: #88d8d2;
}

.color-18 {
    background-color: #a4e3de;
}

.color-19 {
    background-color: #b9f1ec;
}

.color-20 {
    background-color: #d6f9f7;
}

.color-21 {
   background-color: #59b660;
}

.color-22 {
   background-color: #7cd680;
   width: 55px;
    height: 55px;
}

.color-23 {
   background-color: #9aeea0;
}

.color-24 {
   background-color: #b8f0bd;
}

.color-25 {
   background-color: #cdfcd0;
}

.color-26 {
   background-color: #c4b714;
}

.color-27 {
   background-color: #ded237;
}

.color-28 {
   background-color: #ece162;
}

.color-29 {
    background-color: #fcf27b;
}

.color-30 {
    background-color: #fdf6a6;
}

.color-31 {
    background-color: #d87944;
}

.color-32 {
    background-color: #f1925b;
}

.color-33 {
    background-color: #f9a97b;
}

.color-34 {
    background-color: #f5c0a1;
}

.color-35 {
    background-color: #fddbc0;
}

.color-36 {
    background-color: #df5755;
}

.color-37 {
    background-color: #fa777e;
}

.color-38 {
    background-color: #f7989d;
}

.color-39 {
    background-color: #f8b0af;
}

<强> DEMO HERE

答案 2 :(得分：1)

你想要什么-------

https://jsfiddle.net/ou7t1osd/9/ 

<div class="colorPickerWrapper" style="
width: 440px;">            
        <div class="color-1 color-tile"></div>
        <div class="color-6 color-tile"></div>
        <div class="color-11 color-tile"></div>
        <div class="color-16 color-tile"></div>
        <div class="color-21 color-tile"></div>
        <div class="color-26 color-tile"></div>
        <div class="color-31 color-tile"></div>
        <div class="color-36 color-tile"></div>
        <div class="color-2 color-tile"></div>  
        <div class="color-7 color-tile"></div>
        <div class="color-12 color-tile"></div>
        <div class="color-17 color-tile"></div>
        <div class="color-22 color-tile"></div>
        <div class="color-27 color-tile"></div>
        <div class="color-32 color-tile"></div>
        <div class="color-37 color-tile"></div>
        <div class="color-3 color-tile"></div>
        <div class="color-8 color-tile"></div>
        <div class="color-13 color-tile"></div>
        <div class="color-18 color-tile"></div>
        <div class="color-23 color-tile"></div>
        <div class="color-28 color-tile"></div>
        <div class="color-33 color-tile"></div>
        <div class="color-38 color-tile"></div>
        <div class="color-4 color-tile"></div>
        <div class="color-9 color-tile"></div>
        <div class="color-14 color-tile"></div>
        <div class="color-19 color-tile"></div>
        <div class="color-24 color-tile"></div>
        <div class="color-29 color-tile"></div>
        <div class="color-34 color-tile"></div>
        <div class="color-39 color-tile"></div>
        <div class="color-5 color-tile"></div>
        <div class="color-10 color-tile"></div>
        <div class="color-15 color-tile"></div>
        <div class="color-20 color-tile"></div>
        <div class="color-25 color-tile"></div>
        <div class="color-30 color-tile"></div>
        <div class="color-35 color-tile"></div>
        <div class="color-40 color-tile"></div>            
      </div>

CSS 

div{
  float:left;    
}

答案 3 :(得分：1)

显然你想以第一列的方式排列方框。 CSS3 flexbox是最合适的解决方案：

.colorPickerWrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 440px; /* 55px * 8 */
  height: 275px; /* 55px * 5 */
}
.color-tile {
  cursor: pointer;
  width: 55px;
  height: 55px;
}
.color-1 {
  background-color: #ff43ad;
}
.color-2 {
  background-color: #f8e928;
}
.color-3 {
  background-color: #99fa42;
}
.color-4 {
  background-color: #5eacfc;
}
.color-5 {
  background-color: #cdcdcd;
}
.color-6 {
  background-color: #9e72bd;
}
.color-7 {
  background-color: #bb85e1;
}
.color-8 {
  background-color: #c8a0e4;
}
.color-9 {
  background-color: #e1c3f6;
}
.color-10 {
  background-color: #efdbfd;
}
.color-11 {
  background-color: #7d8ec6;
}
.color-12 {
  background-color: #94a6e3;
}
.color-13 {
  background-color: #aabaed;
}
.color-14 {
  background-color: #c1cdf6;
}
.color-15 {
  background-color: #dce4fc;
}
.color-16 {
  background-color: #66bcb5;
}
.color-17 {
  background-color: #88d8d2;
}
.color-18 {
  background-color: #a4e3de;
}
.color-19 {
  background-color: #b9f1ec;
}
.color-20 {
  background-color: #d6f9f7;
}
.color-21 {
  background-color: #59b660;
}
.color-22 {
  background-color: #7cd680;
  width: 55px;
  height: 55px;
}
.color-23 {
  background-color: #9aeea0;
}
.color-24 {
  background-color: #b8f0bd;
}
.color-25 {
  background-color: #cdfcd0;
}
.color-26 {
  background-color: #c4b714;
}
.color-27 {
  background-color: #ded237;
}
.color-28 {
  background-color: #ece162;
}
.color-29 {
  background-color: #fcf27b;
}
.color-30 {
  background-color: #fdf6a6;
}
.color-31 {
  background-color: #d87944;
}
.color-32 {
  background-color: #f1925b;
}
.color-33 {
  background-color: #f9a97b;
}
.color-34 {
  background-color: #f5c0a1;
}
.color-35 {
  background-color: #fddbc0;
}
.color-36 {
  background-color: #df5755;
}
.color-37 {
  background-color: #fa777e;
}
.color-38 {
  background-color: #f7989d;
}
.color-39 {
  background-color: #f8b0af;
}
.color-40 {
  background-color: #f9c9c8;
}
<div class="colorPickerWrapper">
  <div class="color-1 color-tile"></div>
  <div class="color-2 color-tile"></div>
  <div class="color-3 color-tile"></div>
  <div class="color-4 color-tile"></div>
  <div class="color-5 color-tile"></div>
  <div class="color-6 color-tile"></div>
  <div class="color-7 color-tile"></div>
  <div class="color-8 color-tile"></div>
  <div class="color-9 color-tile"></div>
  <div class="color-10 color-tile"></div>
  <div class="color-11 color-tile"></div>
  <div class="color-12 color-tile"></div>
  <div class="color-13 color-tile"></div>
  <div class="color-14 color-tile"></div>
  <div class="color-15 color-tile"></div>
  <div class="color-16 color-tile"></div>
  <div class="color-17 color-tile"></div>
  <div class="color-18 color-tile"></div>
  <div class="color-19 color-tile"></div>
  <div class="color-20 color-tile"></div>
  <div class="color-21 color-tile"></div>
  <div class="color-22 color-tile"></div>
  <div class="color-23 color-tile"></div>
  <div class="color-24 color-tile"></div>
  <div class="color-25 color-tile"></div>
  <div class="color-26 color-tile"></div>
  <div class="color-27 color-tile"></div>
  <div class="color-28 color-tile"></div>
  <div class="color-29 color-tile"></div>
  <div class="color-30 color-tile"></div>
  <div class="color-31 color-tile"></div>
  <div class="color-32 color-tile"></div>
  <div class="color-33 color-tile"></div>
  <div class="color-34 color-tile"></div>
  <div class="color-35 color-tile"></div>
  <div class="color-36 color-tile"></div>
  <div class="color-37 color-tile"></div>
  <div class="color-38 color-tile"></div>
  <div class="color-39 color-tile"></div>
  <div class="color-40 color-tile"></div>

</div>

答案 4 :(得分：0)

尝试使用8行5列的表....

示例：

<div class="colorPickerWrapper">
            <table>
                <tbody>
                <tr>
                    <td><div class="color-1 color-tile"></div></td>
                     <td><div class="color-2 color-tile"></div></td>
                     <td><div class="color-3 color-tile"></div></td>
                     <td><div class="color-4 color-tile"></div></td>
                     <td><div class="color-5 color-tile"></div></td>
                </tr>
                        <tr>
                    <td> <div class="color-6 color-tile"></div></td>
                     <td><div class="color-7 color-tile"></div></td>
                     <td> <div class="color-8 color-tile"></div>  </td>
                     <td><div class="color-9 color-tile"></div></td>
                     <td> <div class="color-10 color-tile"></div></td>
                </tr>.........
                </tbody>
              </table>

答案 5 :(得分：0)

更改此课程

  

。颜色瓦片{       游标：指针;       宽度：55px;       身高：55px;       向左飘浮; }

相关问题
最新问题