我其实想要一个div中的两个网格,我的意思是一个网格在右边,其他在左边.....但现在网格出现了。它与你在两行中的表中分裂一样!与我需要拆分div并添加两个并排网格相同。希望你明白我的观点。提前感谢您的支持和回复如何在分割表格时将div分割为两列?
7
A
回答
16
你的主要股利
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
使用CSS中创建两个div,固定每一个正确的一边
#left { float:left }
#right { float:right }
5
这一切都取决于您希望为该表达到的设计。有多种方法,每种方法都会产生稍微不同的结果。
- 您可以更改div上的
display
CSS属性。使用的最佳值将是table-cell
;但是,此值不受任何版本的IE支持。您也可以尝试inline
或inline-block
的值。 - 您可以使div浮动到其容器的左侧。
- 您可以在其容器中使用div的绝对或相对定位;然而,这种方法不适用于流体设计。
- 您可以切换到
span
。
-1
使用表。使用更高效的表格更有意义。像这样的东西就是制作表格,div不是为了制作。
+6
否;这是*不*有哪些表格是为了! – 2012-09-27 00:32:31
0
这是奥马尔阿比德接受的答案的扩展。我从这个开始,不得不作出进一步的修改,以便在我提到的问题的例子中起作用。
我使用类名替代了ID,所以我可以在多个实例中调用相同的CSS。这给了我模拟两个相同大小单元的能力。在我的例子中,我使用ems设置了固定大小,以便它可以保持其外观跨越一系列桌面和桌面浏览器大小(在我的移动CSS中,我有不同的策略)。
要对齐左侧div中的图像,我必须创建一个单独的块(CSS代码中的最后一个块)。
这应该解决的问题在大多数情况下
<div class="BrandContainer">
<div class="BrandContainerTitle">
<h1>...</h1>
</div>
<div class="BrandContainerImage">
<img alt="Demo image" src="..." />
</div>
</div>
CSS:
.BrandContainer
{
width: 22em;
}
.BrandContainerTitle
{
vertical-align: top;
float: right;
width: 10em;
}
.BrandContainerImage
{
vertical-align: top;
float: left;
}
.BrandContainerImage img
{
width: 10em;
}
相关问题
- 1. 如何分割两个表格字段?
- 2. CSS如何将包含div列表的div分割成2列
- 3. 分割列表
- 4. 如何将2元组列表分割成两个列表?
- 5. 如何在XSL中将表格垂直分割为两个表格?
- 6. 分割值列表
- 7. 分割列表Python
- 8. Prolog分割列表
- 9. 分割python列表
- 10. Java分割列表
- 11. 分割Linq列表
- 12. 分割一个div分成四个格
- 13. c#linq分割列表按实体值分为两部分
- 14. 在Python中分割列表
- 15. 在python中分割列表
- 16. 将分割列表加入列表
- 17. 如何通过DIV将页面分割为多个部分?
- 18. 分割线分为两个部分
- 19. 将图像分割为像素div
- 20. 如何分割网格柱?
- 21. 如何将矢量列表分割为列或矩阵?
- 22. 如何分割
- 23. 如何将DIV标签的内容分割为多个DIV?
- 24. 表格的字符分割
- 25. mysql将一列分割为多列
- 26. 猪:如何分割阵列
- 27. 如何分割该阵列
- 28. 分割栏分成两个
- 29. 按“|”分割列
- 30. 分割的格式化数据列表
这不会表现为表。你无法左右100%身高。 – ciembor 2012-08-05 01:43:13