Размещение элементов на странице в Drupal 7 - PullRequest
Новая
       13

Размещение элементов на странице в Drupal 7

0 голосов
/ 29 ноября 2011

У меня есть набор 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 с изображениями на них. То, что я хотел бы сделать, это расположить их, как указано выше. Дайте мне знать, если вам нужно больше подробностей.

Спасибо

Ответы [ 2 ]

1 голос
/ 29 ноября 2011

Вам не нужно использовать позицию, просто используйте float: left для div, которые вы хотите в строке. Чем вы можете использовать некоторый элемент с clear: left под этими элементами 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 со значением left или обоими.

1 голос
/ 29 ноября 2011

Избавьтесь от абсолютного позиционирования.Вы должны дать нам что-то еще, с чем можно поиграть, если вам недостаточно помощи.

РЕДАКТИРОВАТЬ: Посмотрите это jsfiddle и дайте мне знать, что не ясно: http://jsfiddle.net/FH7cg/.

...