将HTML表格调整为显示的内容

时间:2014-08-04 20:19:54

标签: html css wordpress

一直在努力,似乎无法弄清楚:

需要html表来保存wordpress中页面的内容。 例如,

 <table class="tableContent">
  <td>  
    <div id="columnOne">
        <h1>
         <div id="pageTitle"><?php echo get_the_title($ID); ?> </div>
         <img src="<?php bloginfo('template_url');?>/...img.png">
        </h1>
        <?php if ( have_posts() ) : while( have_posts() ) : the_post();
                the_content();
            endwhile; endif; ?>
    </div>
  </td>
  </table>

这种风格是

.tableContent{
    position: relative;
    width: 60%;
    background-color: #FFFFFF;  
}

问题是表格没有调整到the_content的高度(wordpress页面中的内容)

因此,如果用户的一个页面有半页的文本,而用户还有另一个页面带有整页文本,那么该表格将不会调整到任一页面的高度。

重申一下,我正在创建一个白色内容窗格,它将作为页面文本背后的背景。此内容窗格需要能够调整到页面中动态文本的高度。我应该使用该表还是在这种情况下有最佳做法?

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

很难从你的描述中确切地说出你在寻找什么,但这是我对它的解释:

http://jsfiddle.net/J89K5/1/

HTML:

<div class="wrapper">
    <h1>Page Title</h1>
    <div class="content">
        <article>
            <header>
                <h2>Post Title</h2>
                <img src="http://dummyimage.com/600x200/bada55/fff.png" alt="Post Header Image">
            </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit porro vero facilis aspernatur nesciunt repellat dicta explicabo a quod praesentium dolorem quasi magnam accusamus debitis veniam veritatis quas odit ipsam.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo maxime dolorum dolorem debitis ipsum ut tempora voluptates tenetur fuga esse dicta eos magnam sunt iure adipisci consectetur voluptate laborum nulla.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus minus adipisci excepturi nemo distinctio ut harum quae eligendi cupiditate laudantium consectetur unde tenetur omnis quidem itaque veritatis neque. Consequatur iste!</p>
        </article>
    </div>
</div>

的CSS:

.content {
    width: 60%;
    padding: 1em;
    background: #fff;
}

正如@misterManSam指出的那样,你不应该使用表格进行页面布局。即便如此,表格单元格符合其内容的高度。所以我不确定这里发生了什么。只是从你提供的代码中你不应该得到这种行为。也许您的内容包装器是浮动的,绝对的还是固定的?