html的图片两行两列显示不出来,简单的两列html布局,不使用表格

Fenton..

35

我知道这个问题已经得到了解答,但是我已经处理了相当多的布局,我想添加一个替代答案来解决浮动元素的一些传统问题......

您可以在此处查看更新后的示例.

使用带有语义元素的HTML 4.01或HTML5没有区别(您需要将左侧和右侧容器声明为display:block,如果它们尚未显示).

CSS

.left {

background-color: Red;

float: left;

width: 50%;

}

.right {

background-color: Aqua;

margin-left: 50%;

}

HTML

I have updated this example to show a great way of getting a two column layout.

• The columns are in the right order semantically
• You don't have to float both columns
• You don't get any odd wrapping behaviour
• The columns are fluid to the available page...
• They don't have to be fluid to the available page - but any container!

CSS中还有一个相当简洁(虽然更新)的附加功能,它允许您将内容布局到列中,而不会使用div来解决这些问题:

column-count: 2;