如何在浏览器窗口调整大小时修复元素的位置并缩放其大小?

时间:2018-01-04 13:41:30

标签: html css angular typescript responsive-design

我想知道如何修复div中包含的元素位置,并在浏览器窗口调整大小时调整其大小。 这是我的代码:

var principale = document.getElementsByClassName("postItSet")[0];
var card = document.createElement('div');
card.className = "card";
card.setAttribute("id", "mydiv" + id1);

var cardBlock = document.createElement('div');
cardBlock.className ="card-block";

var cardTitle = document.createElement('div');
cardTitle.className = "card-title";
if (this.model.choice == true) {
   cardTitle.innerHTML = "anonymous"
}
else {
   cardTitle.innerHTML = this.profil.user.prenom + "";
}

var cardText = document.createElement('div');
cardText.className = "card-text";
cardText.setAttribute("id", "mydivheader");
cardText.innerHTML = self.model.contenu;

cardBlock.appendChild(cardTitle);
cardBlock.appendChild(cardText);
card.appendChild(cardBlock);
principale.appendChild(card);
principale.appendChild(document.createElement("br"));

这是css:

var st = document.getElementsByTagName("style")[0];
st.innerHTML = ".card {position:fixed ;z-index: 9;background-color: #f1f1f1;text-align: center;border: 1px solid #d3d3d3;cursor: grab; word-wrap: break-word; width:auto; }";
st.innerHTML += ".cardBlock {padding: 10px;cursor: grab; z-index: 10;background-color: #2196F3; color: #fff;  word-wrap: break-word;}";

我想让我的网页快速响应。我的目标是在特定的背景图像上添加拖放“卡片”元素,即使我们调整浏览器的窗口大小也能保持其位置。我尝试了很多东西,但在大多数情况下,我的卡片都没有掉落可拖动的属性。

感谢您的回答。

0 个答案:

没有答案