css - 动态 Div 布局

Question

我知道有很多关于 div 布局的帖子，但我想要做的似乎不在这里。我正在创建包含动态文本的 div。因此每个 div 都是可变长度的。我希望这些 div 彼此并排放置，在页面上放置 4 个。换句话说，每个 div 占据宽度的 25%。 div 的数量也是可变的，因此如果超过 4 个 div，则剩余的将以相同的方式开始放置在下方。下面是我要描绘的图片，灰色框是我正在创建的 div。感谢您提供任何帮助，在此先感谢您!

div 是在我的函数 addSuggestion() 中创建的，如下所示:

HTML:

addSuggestion = function (counter, company_name, contact_name, street_address_1, street_address_2, phone_number, email_address) {
    var output = document.getElementById('container');
    var div = document.createElement('div');
    var company = document.createElement('p');
    company.className = "companyClass";
    var contact = document.createElement('p');
    contact.className = "otherClass";
    var address1 = document.createElement('p');
    address1.className = "addressClass";
    var address2 = document.createElement('p');
    address2.className = "addressClass";
    var phone = document.createElement('p');
    phone.className = "otherClass";
    var email = document.createElement('p');
    email.className = "otherClass";

    if(counter%4 == 0) {
        div.className = "farleft";
    }
    else if(counter%4 == 1) {
        div.className = "centerleft";
    }
    else if(counter%4 == 2) {
        div.className = "centerright";
    }
    else {
        div.className = "farright";
    }

        if(company_name) {
        company.textContent = company_name;
        div.appendChild(company);
    }
    else {
        company.textContent = "*** COMPANY INFO ***";
        div.appendChild(company);
    }

    if(contact_name) {
        contact.textContent = contact_name;
        div.appendChild(contact);
    }

    if(street_address_1) {
            address1.textContent = street_address_1;
        div.appendChild(address1);
    }

    if(street_address_2) {
        address2.textContent = street_address_2;
        div.appendChild(address2);
    }

    if(phone_number) {
        phone.textContent = phone_number;
        div.appendChild(phone);
    }

        if(email_address) {
        email.textContent = email_address;
        div.appendChild(email);
    }

    output.appendChild(div);
}

CSS:

#container {
    width: 100%;
}
#farleft {
    width: 25%;
    position: absolute;
    float:left;
}
#centerleft {
    width: 25%;
    position: relative;
    float:left;
}
#centerright {
    width: 25%;
    position: relative;
    float:right;
}
#farright {
    width: 25%;
    position: relative;
    float:right;
}

Answer 1

正在分配 width: 25%每个 div 将在同一行上获得 4 个 div(计算外部没有边框和/或边距/填充)。

float: left会让他们保持在左边。为了让你的“新行”下降一行，<br clear="both">会成功的:

JSFiddle