0

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;
}
4

3 に答える 3

1

各 div に割り当てるwidth: 25%と、同じ行に 4 つの div が配置されます (外側に境界線やマージン/パディングがない場合)。

float: leftそれらを左に保ちます。「新しい行」を行にドロップするには、次のようにします<br clear="both">。

JSFiddle

于 2013-08-13T20:00:45.383 に答える
0

解決策は非常に簡単です。

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

jsfiddle

于 2013-08-13T21:53:54.757 に答える