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

Question

我的页面中有一组 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>

这就是我创建带有图像的 div 的代码。我想做的是按照上面的说明安排它们。如果您需要更多详细信息，请告诉我。

谢谢

Answer 1

您不需要使用位置，只需将 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>

在这种情况下，如果您使用 clear with value left 或两者都使用，请注意区别。

Answer 2

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

编辑：看到这个 jsfiddle，让我知道什么不清楚：http://jsfiddle.net/FH7cg/。