Css 在Drupal 7中定位页面中的元素

我的页面中有一组div，其中包含一些图像。我希望它们水平排列，而不是垂直排列，即：

 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>

选择你的计划
一个
两个
//另外8个这样的

这就是我创建div的代码，其中包含图像。我想做的是按照上面的指示安排它们。如果你需要更多的细节，请告诉我

---

谢谢

摆脱绝对定位。如果这还不够的话，你应该给我们更多的东西玩

---

编辑：查看此JSFIDLE并让我知道哪些地方不清楚：。

您不需要使用position，只需使用float:left作为您想要的一行div。然后您可以在那些div下面使用clear:left的元素，这样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>

#包裹{宽度：500px；背景：#ffa；}
div.row{float:左；宽度：150px；高度：150px；背景：#aff}
div.right{float:right；height:250px；}
div.clear{clear:左；宽度：250px；背景：#faf}
div

div

div

div

对

清楚的

洛雷姆·伊普苏姆·多洛·希特

---

如果在本例中使用clear with value left或两者都使用，请注意区别。

使用float:left的问题是元素不再处于文档的自然流中，页脚向上推得太远。我添加了一个示例，我想你需要理解清楚是如何运作的。我明白你的意思，但我想我解释错了。我的问题是，当我使用float时，

content

div的高度变为0。因此，浮动的元素变得“不合适”，因为它们应该在content div中。然而，由于float属性，content div认为它里面什么都没有，变得非常小，把其余的alyout都搞乱了。这是我能想到的最好的描述方式。@KerrM:所以我认为你在这里说的基本上是它在我的示例中起作用，但在drupal中不起作用？Drupal是一个有趣的怪兽，即使是最基本的页面通常也会涉及到如此多的css和html，要实现您的目标可能会非常令人沮丧。如果是这种情况，那么您可能只想向我们展示站点，或者一个包含JSFIDLE中问题的复制。如果您在内容中的div之后添加cleaner，那么内容的高度将不会是0，而是从顶部到cleaner。如果你看我的例子，如果你删除了cleaner，#wrap（黄色背景）的高度为：0。如果添加清理器，则换行将在清理器之后结束。在内容部分中添加了一些有关div结构的额外信息。感谢您的回复这正是我需要的，但我的问题是，当我使用float时，content div的高度变为0。因此，浮动的元素变得“不合适”，因为它们应该在content div中。然而，由于float属性，content div认为它里面什么都没有，变得非常小，把其余的alyout都搞乱了。这是我能想到的最好的描述方式。再次感谢您的及时回复。