Question

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

 X X X X X
 X X X X X

而不是

X
X
X
...
X

我已尝试使用float，position:absolute属性，但在使用这些属性时，元素是＆＃34;未附加的＆＃34;从文档的正常流程开始，并定位在内容区域之外。

在不改变文档正常流程的情况下，以这种方式定位元素的最佳方法是什么？

修改：

<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

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

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

Answer 2

您不需要使用位置，只需将float：left用于连续所需的div。你可以使用一些带有clear的元素：在这些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>

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

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

2 个答案: