使用显示属性中的CSS

所以我一直在使用CSS表的显示属性来获取我的网站上的表格布局中的表格的网页布局。现在你进入使用“浮动”属性或使用HTML表格标记之前，我更喜欢CSS表格布局，更好地找到它，我已经下定决心了。下面是HTML代码：使用显示属性中的CSS

<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>

这里是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>

问题是，当我在CSS使用表列属性，那么一切都在HTML标签上的main_col下div消失。

来源

2012-10-23 AymNaija

你能澄清你的“的那些事直消失”是什么意思？ –

对不起，我有点沮丧，但谢谢你的回答。我看不出在main_col HTML标签的DIV任何东西，当我使用表显示栏 – AymNaija

试试这个（可能重复）：http://stackoverflow.com/questions/7617418/how-is-a-css -display表列，应该到工作 –

使用this example为您的结构，并从那里走。你的桌子疯狂混乱，我不认为你真的想要表列。或者，也许你想看看它的样子会有帮助，我们可以提供代码示例？（http://xahlee.info/js/css_table.html）

来源

2012-11-14 18:07:02

使用显示属性中的CSS

回答

相关问题