如何将div放在平等的边缘

时间:2016-02-07 09:15:32

标签: javascript html css

function DecToHex(decimal) { // Data (decimal)

    length = -1;    // Base string length
    string = '';    // Source 'string'

    characters = [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F' ]; // character array

    do { // Grab each nibble in reverse order because JavaScript has no unsigned left shift

        string += characters[decimal & 0xF];   // Mask byte, get that character
        ++length;                              // Increment to length of string

    } while (decimal >>>= 4); // For next character shift right 4 bits, or break on 0

    decimal += 'x'; // Convert that 0 into a hex prefix string -> '0x'

    do
        decimal += string[length];
    while (length--); // Flip string forwards, with the prefixed '0x'

    return (decimal); // return (hexadecimal);
}

/* Original: */

D = 3678;    // Data (decimal)
C = 0xF;    // Check
A = D;        // Accumulate
B = -1;        // Base string length
S = '';        // Source 'string'
H = '0x';    // Destination 'string'

do {
    ++B;
    A& = C;

    switch(A) {
        case 0xA: A='A'
        break;

        case 0xB: A='B'
        break;

        case 0xC: A='C'
        break;

        case 0xD: A='D'
        break;

        case 0xE: A='E'
        break;

        case 0xF: A='F'
        break;

        A = (A);
    }
    S += A;

    D >>>= 0x04;
    A = D;
} while(D)

do
    H += S[B];
while (B--)

S = B = A = C = D; // Zero out variables
alert(H);    // H: holds hexadecimal equivalent

现在的问题是,当我制作屏幕尺寸小的div按照屏幕尺寸向下移动但在右侧有很多黑色空间仍然只是想让这个空间平均分配给边距如何做到这一点我需要帮助

2 个答案:

答案 0 :(得分:1)

  

我想要相同的尺寸但是我必须平均分配边距,并且当sereen尺寸小于宽度div时必须向下滑动。

Flexbox可以做到这一点;



* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
}
.column {
  height: 150px;
  flex: 0 0 150px;
  margin-bottom: 1em;
  border: 1px solid red;
}

<div class='row'>
  <div class="column">
    <p>some data 1</p>
  </div>
  <div class="column">
    <p>some data 2</p>
  </div>
  <div class="column">
    <p>some data 3</p>
  </div>
  <div class="column">
    <p>some data 4</p>
  </div>
  <div class="column">
    <p>some data 5</p>
  </div>

</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您可以将display: table用于父级,将display-table-cell用于子级,以使列平均分布。不需要花车。

.row {
  display:table;
  width:100%;
  text-align: center;
}

.column {
  display:table-cell;
}
<div class='row'>
  <div class='column' style='height:150px;width:150px;'>
    <p>some data</p>
  </div>
  <div class='column' style='height:150px;width:150px;'>
    <p>some data</p>
  </div>
  <div class='column' style='height:150px;width:150px;'>
    <p>some data</p>
  </div>
  <div class='column' style='height:150px;width:150px;'>
    <p>some data</p>
  </div>
  <div class='column' style='height:150px;width:150px;'>
    <p>some data</p>
  </div>
</div>