在css中使用display属性的表格网页布局

所以我一直在使用CSS表格显示属性在我的网站上获得表格布局。现在，在您进入使用“float”属性或使用HTML表标记之前，我更喜欢CSS表布局，并且发现它更好，我已经下定决心了。以下是HTML代码：

<div class="page_wrap">
    <div class="header">
        <div class="banner">
            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Topics</a></li>
                <li><a href="#">"Closet"</a></li>
                <li><a href="#">Music</a></li>
                <li><a href="#">Resources</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
        <div class="directory"></div>
    </div>
    <div class="content">
        <div class="main_col">
            <div class="blog">
                <div class="blog_head">
                    <h3>What To Wear Today</h3>
                </div>
                <div class="blog_body">
                    <p></p>
                </div>
                <div class="blog_recent"></div>
            </div>
            <div class="news">
                <div class="news_recent"></div>
            </div>
        </div>
        <div class="sub_col">
            <div class="daily_verse">
                <h3>"What Word To Wear Today"</h3>
                <p></p>
            </div>
            <div class="bible_topic"></div>
        </div>
    </div>
    <div class="footer">
        <div class="container"></div>
    </div>
</div>

标题1
标题2








今天穿什么

“今天穿什么样的衣服”

下面是CSS：

.content
{
    display: table-column-group;
    margin-top: 25px;
}

.main_col
{
    display: table-column;
    background: red;
    width: 550px;
    padding: 20px 15px;
}

.sub_col
{
    display: table-cell;
    background: green;
    width: 350px;
    padding: 20px 15px;
}

.blog
{
    display: table-cell;
    background: black;
}

.blog h3
{
    padding: 20px 0px;
    width: 250px;
}

.news
{
    display: table-cell;
    background: gray;
}

.daily_verse
{
    display: table-cell;
}

.bible_topic
{
    display: table-cell;
}
</style>

.content
{
显示：表列组；
边缘顶部：25px；
}
.main_col
{
显示：表格列；
背景：红色；
宽度：550px；
填充：20px 15px；
}
.sub_col
{
显示：表格单元格；
背景：绿色；
宽度：350px；
填充：20px 15px；
}
.博客
{
显示：表格单元格；
背景：黑色；
}
.博客h3
{
填充：20px 0px；
宽度：250px；
}
.新闻
{
显示：表格单元格；
背景：灰色；
}
.每日诗歌
{
显示：表格单元格；
}
.圣经主题
{
显示：表格单元格；
}

问题是，当我在CSS中使用table column属性时，main_col div下的HTML标记中的所有内容都会消失。

将其用作您的结构并从那里开始。你的表格杂乱无章，我不认为你真的想要表格列。或者，您希望它看起来如何的一个说明会有所帮助，我们可以提供代码示例？

---

(http://xahlee.info/js/css_table.html)

你能澄清一下“事情就这样消失了”是什么意思吗？对不起，我有点沮丧，但谢谢你的回答。当我使用table display列时，在main_col html标记的div中看不到任何内容。请尝试以下操作（可能重复）：