在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页面中定位元素

回答

相关问题