在 Drupal 7 中定位页面内的元素
[英] Positioning elements within a page in Drupal 7
本文介绍了在 Drupal 7 中定位页面内的元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的页面中有一组 div，其中有一些图像.我希望它们水平排列而不是垂直排列，即:
X X X X XX X X X X
代替
XXX...X
我尝试过使用 float、position:absolute 属性，但是在使用它们时，元素与文档的正常流分离"，并且定位在内容区.
在不改变文档正常流程的情况下以这种方式定位元素的最佳方法是什么?
编辑:
<h6 id="choose">选择您的计划</h6><div class="region region-content"><div class="canvas-wrapper"><div class="canvas-triangle" id="one"><canvas id="one"></canvas>
<div class="triangle-caption">一个</div>
<div class="canvas-wrapper"><div class="canvas-triangle" id="two"><canvas id="两个"></canvas>
<div class="triangle-caption">两个</div>
//另外8个这样的
这是我创建带有图像的 div 的代码.我想做的是按照上面的说明安排它们.如果您需要更多详细信息，请告诉我.
谢谢
解决方案
你不需要使用位置，只需对你想要的 div 使用 float:left 即可.比你可以使用一些带有 clear:left 的元素在那些 div 下，所以 div 不会覆盖这个元素或代码中的任何其他元素......
要理解它，请尝试使用清晰和不清晰的代码:
#wrap {width: 500px;背景:#ffa;}div.row {浮动:左；宽度:150px；高度:150px；背景:#aff}div.right {浮动:右；高度:250px;}div.clear {清除:左；宽度:250px；背景:#faf}<div id="包裹"><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 坐...... </p>
在这种情况下，如果您使用 clear 和 value left 或两者都使用，请注意区别.
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
解决方案
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.
这篇关于在 Drupal 7 中定位页面内的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
