如何像Android的RelativeLayout一樣相互佈局HTML div？

我想展示HTML div相對於另一個，如Android's RelativeLayout。如何像Android的RelativeLayout一樣相互佈局HTML div？

任何想法如何實現它？謝謝。

編輯：這個問題是一個普遍的問題，但我看到人們要求一個具體的例子，所以這裏是鏈接的一個。您可以將示例佈局要求簡化爲：從開始到結束的藍色方形。在它下面有兩個方塊：紅色和黃色。黃色到紅色的右邊直到結束。在黃色下面，一個綠色的方形與右邊對齊。總共4個divs，彼此相對佈局。

enter image description here

來源

2015-05-25 AlikElzin-kilaka

你能否說明一下你嘗試過這麼遠嗎？ – Nitesh

你能提供一個你想要實現的佈局的例子嗎？ –

在鏈接中添加了示例並寫了一個簡化的要求。 –

與Android一樣，在HTML中不能直接定義的線性或相對佈局。但通過CSS你可以定義你想要的任何設計。

例如，在您的問題中，您已要求四個輸入以特定格式對齊。

您可以將所有輸入封裝在div中，並使用float屬性對齊。

The layout is here.

編輯：Here是與像素值.div2_2佈局。

您可以使用以下html和css來實現此佈局。

HTML

<div class="parent"> 
    <div class="div1"> 
      <input type="text" placeholder="Reminder Name"/> 
    </div> 
    <div class="div2"> 
     <div class="div2_1"> 
      <input type="text" value="Wed, Jun 27, 2012"/> 
     </div> 
     <div class="div2_2"> 
      <input type="text" value="8.00am"/> 
     </div> 
    </div> 
    <div class="div3"> 
     <div class="div3_1"> 
      <input type="button" value="Done"/> 
     </div> 
    </div> 
</div>

CSS

div{ 
    padding: 3px 0; 
} 
input { 
    width: 100%; 
} 
.parent{ 
    width: 400px; 
} 
.div1, .div2, .div3{ 
    width: 100%; 
} 
.div2{ 
    display: inline-block; 
} 
.div2_1, .div2_2{ 
    display: inline-block; 
} 
.div2_1{ 
    width: 55%; 
    float: left; 
} 
.div2_2{ 
    width: 44%; 
    float: right; 
} 
.div3_1{ 
    width: 30%; 
    display: inline-block; 
    float: right; 
}

我希望這將是對你有幫助。

來源

2015-05-25 13:03:44 sasi

如果我將'div2_1'更改爲絕對寬度（以像素爲單位），則所有內容都會摺疊，因爲'div2_2'沒有被定義爲位於'div2_1'的右側。請參閱此處對像素的更改：http://plnkr.co/edit/I5Lk65ekR97KC2mclemn?p=preview。 –

如果更改.div2_2的px寬度，則必須添加.div2 {display：inline-block} – sasi

您可以使用CSS中的display屬性將div放在同一'行'上。

使用

display: inline;

或

display: inline-block;

'inline-block的' 意味着你的DIV可以給出高度和寬度屬性，而 '內聯' 將只是你的內容的大小。在這種情況下，您可能需要使用內聯塊，以便您可以排列您的div。

來源

2015-05-25 13:03:46 khopsickle

發現使用float和clear方式：

<!DOCTYPE html> 
<html> 
<body> 
    <div style="width: 100%; height: 50px; background-color: blue;"></div> 
    <div style="width: 60%; height: 50px; background-color: red; float: left"></div> 
    <div style="width: 40%; height: 50px; background-color: yellow; float: left"></div> 
    <div style="width: 40%; height: 50px; background-color: green; clear:left; float: right"> 
</body> 
</html>

您可以用代碼here玩。

* clear:left的目的是爲了保持下一行的綠色 - 即使當紅色和黃色的大小變爲像素而不是百分比時。

enter image description here

來源

2015-05-25 15:28:00

嘗試釋放「float：left」。自己驚喜。 –

下面是另一個版本，它將黃色定位在黃色下方：http://plnkr.co/edit/c0JrLSSkAvpyWyhgkfCU?p=preview –

無論如何，這是迄今爲止所有其他的解決方案，都很糟糕！沒有什麼是相對於另一個。一切都是恆定的！ –

查看此頁面，瞭解如何佈置你的網頁在「網格系統」

getbootstrap.com/css

來源

2017-03-01 16:43:49 BossmanT

儘管鏈接可能有幫助，但請嘗試在答案中包含重要信息。 – mhatch

如何像Android的RelativeLayout一樣相互佈局HTML div？

回答

相關問題