在Drupal 7頁面中定位元素

我在頁面中有一組div，裏面有一些圖片。我想他們是水平而非垂直排列，即：在Drupal 7頁面中定位元素

X X X X X 
X X X X X

代替

X 
X 
X 
... 
X

我使用float，position:absolute性嘗試，但在使用它們時的元素是從「獨立的」文檔的正常流動並與內容區域放置在一起。

在不改變文檔正常流程的情況下以這種方式定位元素的最佳方式是什麼？

編輯：

<div id="content" class="column"><div class="section"> 
    <h6 id="choose">CHOOSE WHAT YOUR PLANB IS</h6> 
<div class="region region-content"> 
    <div class="canvas-wrapper"> 
    <div class="canvas-triangle" id="one"> 
    <canvas id="one"></canvas> 
    </div> 
    <div class="triangle-caption">One</div> 
</div> 
<div class="canvas-wrapper"> 
    <div class="canvas-triangle" id="two"> 
    <canvas id="two"></canvas> 
    </div> 
    <div class="triangle-caption">Two</div> 
</div> 
//ANOTHER 8 LIKE THAT 
</div> 
</div>

這是我有一個創建與他們的圖像的div代碼。我想要做的就是按照上面的指示安排它們。讓我知道你是否需要更多細節。

謝謝

來源

2011-11-29 KerrM

你不需要使用位置，只需使用float：left就可以連接你想要的div。比你可以使用有明確的一些元素：這些div下離開，這樣的div不會覆蓋此元素或在代碼中任何其他元件還...

編輯：

要了解它，嘗試這個代碼有和沒有明確的：

#wrap {width: 500px; background:#ffa;} 
div.row {float:left; width:150px; height:150px; background:#aff} 
div.right {float:right; height:250px;} 
div.clear {clear:left; width: 250px; background:#faf} 

<div id="wrap"> 
    <div class="row"><p>div</p></div> 
    <div class="row"><p>div</p></div> 
    <div class="row"><p>div</p></div> 
    <div class="row"><p>div</p></div> 
    <div class="row right"><p>right</p></div> 

    <div class="clear"><p>clear</p></div> 

    <p>Lorem ipsum dolor sit...... </p> 
</div>

如果你在這種情況下使用左值或兩者都使用清除，也請注意區別。

來源

2011-11-29 00:18:54

我使用float：left的問題是，元素然後停止在文檔的自然流動中，並且頁腳向上推得過高。 – KerrM

我已經添加了一個例子，我想你需要了解清晰的作品。 –

我明白你的意思了，但我認爲我錯誤地解釋了自己。我的問題是，當我使用float時，'content' div的高度變爲0.所以浮動的元素會變得「不合適」，因爲它們應該在內容div中。然而，由於浮動屬性，內容div認爲裏面沒有任何內容，並且變得非常小，混亂了其餘的alyout。這是我能想到描述它的最好方式。 – KerrM

擺脫絕對定位。如果沒有足夠的幫助，你應該給我們更多的東西來玩。

編輯：看到這個jsfiddle，讓我知道什麼不明確：http://jsfiddle.net/FH7cg/。

來源

2011-11-29 00:07:22 Godwin

在內容部分添加了關於div結構的額外信息。謝謝你的回覆 – KerrM

@KerrM：查看編輯。 – Godwin

這正是我需要的，但我的問題是，當我使用浮動的內容div的高度變爲0.所以浮動元素變得「不合適」，因爲它們應該在內容div內。然而，由於浮動屬性，內容div認爲裏面沒有任何內容，並且變得非常小，混亂了其餘的alyout。這是我能想到描述它的最好方式。再次感謝提供的答案。 – KerrM

在Drupal 7頁面中定位元素

回答

相關問題