Question

如何在this link上创建一个块？

这是我到目前为止所尝试的：

        window.onload = function(){

    var height = 0;
    var width = 0;
    var count_blocks = 0;
    width = window.innerWidth; 

    var h_right_block = document.getElementById('right_block').offsetHeight;
    var h_i_right_block = document.getElementById('i_right_block').offsetHeight;

    h_i_right_block += 20; 

    if(h_i_right_block > h_right_block){
        var w_Scroll = getScrollBarWidth();
        count_blocks = (width - 270 - w_Scroll) / 270;
    }else{
        count_blocks = (width - 270) / 270; 
    }
    count_blocks = Math.floor(count_blocks); 
    var diff_width_block = 250 / count_blocks;
    diff_width_block = Math.round(diff_width_block); 
    diff_width_block = 250 - diff_width_block;
    //diff_width_block = diff_width_block + "px";

    $( '.box' ).css( 'width', diff_width_block );
};

Answer 1

你可以尝试这个：jsfiddle url：http://jsfiddle.net/Khumesh/qsbtfhx4/

CSS：。部分 { 明确：两者; 填充：0px; 保证金：0px; }

    .col {
        display: block;
        float: left;
        margin-right: 2px;
        margin-bottom: 2px;
        border: 1px solid #000;
    }

        .col:first-child {
            margin-left: 0;
        }

    .group:before,
    .group:after {
        content: "";
        display: table;
    }

    .group:after {
        clear: both;
    }

    .group {
        zoom: 1; /* For IE 6/7 */
    }


    .span_3_of_3 {
        width: 100%;
    }

    .span_2_of_3 {
        width: 66.1%;
    }

    .span_1_of_3 {
        width: 32.2%;
    }

    @media only screen and (max-width: 480px) {
        .col {
            margin: 1% 0 1% 0%;
        }

        .span_3_of_3, .span_2_of_3, .span_1_of_3 {
            width: 100%;
        }
    }

HTML：

<div class="section group">
        <div class="col span_1_of_3">
            This is column 1
        </div>
        <div class="col span_1_of_3">
            This is column 2
        </div>
        <div class="col span_1_of_3">
            This is column 3
        </div>
        <div class="col span_1_of_3">
            This is column 4
        </div>
        <div class="col span_1_of_3">
            This is column 5
        </div>
        <div class="col span_1_of_3">
            This is column 6
        </div>
        <div class="col span_1_of_3">
            This is column 7
        </div>
        <div class="col span_1_of_3">
            This is column 8
        </div>
        <div class="col span_1_of_3">
            This is column 9
        </div>
    </div>

Answer 2

您可以使用div中的标记HTML或HTML5 tags中的任何标记至于元素的定位，您应该在CSS

中看到Float属性

你可以在这里看到更多link;）

如何创建像抽搐一样的块？

2 个答案: