將元素添加到頁面而無需手動重新定位以前的元素

假設您決定將新元素添加到HTML文件。你編輯所有其他元素的位置？有沒有更好的方法呢？將元素添加到頁面而無需手動重新定位以前的元素

例如我有一個佈局，有幾個div元素和一個列表。我花了一些時間讓頁面上的所有內容看起來不錯。然後我決定添加另一個div元素，突然間一切都沒有了。

2017-02-27 vampiire

您是否檢查過響應式設計框架，例如'twitter bootstrap'，'materialize'等？ –

@Guruprasad Rao老實說，我不知道你剛剛對我說什麼。我剛剛開始幾個星期前，我對網頁設計很陌生。我認爲我沒有正確表達我的問題，因爲我沒有任何運氣通過谷歌尋找建議。 – vampiire

只是不用擔心。如果你通過添加一些代碼並確切地告訴你需要幫助的地方，那麼你會更精確地解決你的問題。有一些像我之前說過的框架，這不僅可以幫助你漂亮的組件來設計你的web應用程序/網站，而且還提供了響應能力，從而減少了爲不同設備創建不同屏幕的開銷。你只需查詢這些框架並解釋所有內容。如果你遇到困難，請求任何幫助，精確.. :) –

你的問題似乎很開放，但我只是想給我兩分錢。

輸入：Flexbox的

一個工具，您可以使用響應式設計（響應，自動意味着你的頁面佈局調整取決於通過它正在觀看的屏幕上），將是Flexbox的CSS屬性。

我已經編輯了這個簡單的例子來顯示這個在行動。這個例子只是使用的父元素的CSS代碼中的幾行，但使孩子（盒）元素調整和重新定位自己自動根據屏幕大小，而不需要任何其他造型：

display: flex; 
flex-flow: row wrap; 
justify-content: space-around;

視圖它在這裏：simple flexbox sample

**一旦你在那個小提琴上，調整你的瀏覽器的大小（或者放大和縮小），並看看盒子是如何自動重新定位自己像魔術一樣！

感興趣嗎？這裏有一些讓你開始：Guide to Flexbox

希望這會有所幫助！

來源

2017-02-27 08:46:41 Noel

這非常整齊，謝謝。我研究bootstrap，但我想了解如何用母語進行操作。 – vampiire

您需要調整佈局中新添加的每個元素的位置和css。它是非常罕見的東西就位。但是如果你使用響應式css如bootstrap，工作量會減少。

來源

2017-02-27 04:40:00

哦，哇。有沒有更有效的方法呢？您可以建議的任何提示，而不是手動更改左側：/ top：和邊距，並觀看預覽頁面以進行更改？ – vampiire

我會研究Bootstrap。謝謝 – vampiire

將元素添加到頁面而無需手動重新定位以前的元素

回答

相關問題