Question

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

Desired Layout

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

为每个div分配width: 25%将使您的4个div位于同一行（计算外部没有边框和/或边距/填充）。

float: left会将它们保留在左侧。为了让你的“新行”下拉一行，<br clear="both">可以解决问题：

JSFiddle

Answer 2

如果它是一行div，你可以将它们存储在一个包含div＆＃34; row＆＃34;它的高度可变。

很抱歉，这并没有多大意义，但在行的div上尝试这个CSS。

min-height: 100px; /*whatever you want the minimum height to be*/
height:auto !important; /*An IE fix for older versions */
height:100%;

上述css将确保您的div不会小于100px，但可以根据其内容增长。

Answer 3

解决方案非常简单：

#container>div {
    width:25%;
    margin:0;
    border:0;
    float:left;
}
#container>div.farleft {
    clear:both;
}

jsfiddle

动态Div布局

3 个答案: