Positioning elements within a page in Drupal 7

问题

I've got a set of divs in my page with some images inside of them. I would like them to be arranged horizontally instead of vertically ie:

 X X X X X
 X X X X X

Instead of

X
X
X
...
X

I've tried using the float, position:absolute properties but when using them the elements are "unattached" from the normal flow of the document and positioned outwith the content area.

What is the best way to position elements in such a way without altering the normal flow of the document?

Edit:

<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>

That's the code I have that creates the divs with the images in them. What I would like to do is arrange them as indicated above. Let me know if you need any more details.

Thanks

回答1:

You don't need to use position, just use float:left for the divs you want in a row. Than you can use some element with clear:left under those divs, so the divs will not overlay this element or any other element further in the code...

edit:

To understand it, try this code with and without clear:

#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>

Also notice the difference if you use clear with value left or both in this case.

回答2:

Get rid of the absolute positioning. You should give us something more to play with if that's not enough help.

EDIT: See this jsfiddle and let me know what's not clear: http://jsfiddle.net/FH7cg/.

来源：https://stackoverflow.com/questions/8304131/positioning-elements-within-a-page-in-drupal-7

标签

css

position

drupal-theming