Есть задача, отобразить список товаров.
http://img109.imageshack.us/img109/3300/77707240.png
Делаю это в таблице, на один tr один товар.
Как сделать так, чтобы надписи Tiny1, Tiny2 (названия товаров) были сверху, как заголовок, потом шла картинка слева, а справа текст, который будет обтекать эту картинку?
| Код |
var table = document.createElement("table");
table.border = 1;
$(table).addClass("prd");
for (var i = 0; i < data.length; i++) {
var tr = document.createElement("tr");
var td = document.createElement("td");
$(tr).append(td);
var p = document.createElement("p");
//info add
var a = document.createElement("a");
$(a).addClass("link");
$(a).attr({"align":"center"});
a.href = data[i].url;
a.appendChild(document.createTextNode(data[i].name));
p.appendChild(a);
p.appendChild(document.createElement("br"));
for (var j = 0; j < data[i].param.length; j++) {
var div = document.createElement("div");
div.appendChild(document.createTextNode(g_data[j + 1].name + ": " + data[i].param[j]));
p.appendChild(div);
p.appendChild(document.createElement("br"));
}
//pic add
var img = document.createElement("img");
$(img).addClass("photo");
$(img).attr({"align": "center"});
img.src = data[i].pic;
p.appendChild(img);
$(tr).append(p);
$(table).append(tr);
}
|
| Код |
.photo { margin: auto; }
.prd { width: 95%; }
|
|