0

我知道有很多关于 div 布局的帖子，但我想要做的似乎并不在这里。我正在创建包含动态文本的 div。因此，每个 div 的长度都是可变的。我希望这些 div 并排放置，在页面上放置 4 个。也就是说，每个 div 占据 25% 的宽度。div 的数量也是可变的，因此如果有超过 4 个 div，那么剩余的 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;
}
4

3 回答 3

1

Assigning width: 25% to each div will get your 4 divs on the same row (counting there are no borders and/or margin/padding on the exterior).

float: left will keep them to the left. In order to get your 'new row' to drop down a line, <br clear="both"> would do the trick:

JSFiddle

于 2013-08-13T20:00:45.383 回答
0

如果它是一行 div，您可以将它们存储在一个包含可变高度的 div“行”中。

抱歉，这没有多大意义，但在行的 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，但可以根据其内容增长。

于 2013-08-13T19:54:07.127 回答
0

解决方案非常简单：

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

jsfiddle

于 2013-08-13T21:53:54.757 回答