具有 CSS 属性 display:table-cell 闪烁的 div答案

【问题标题】：div's with CSS property display:table-cell flickers具有 CSS 属性 display:table-cell 闪烁的 div
【发布时间】：2013-08-12 16:13:25
【问题描述】：

无论我做什么，我的 div 在加载时都不会闪烁。

content div 中有三个主要的 div。它们是left, right and middle div，在middle div 内部我已经动态创建了我希望宽度等分以适合中间div 的菜单。

CSS

#content{
    width: 1000px;
    display: table;
}
#left, #right, #middle{
    float: none;
    vertical-align: top;
    display: table-cell;
}
#left, #right{
    width: 200px;
}
#middle{
    width: 600px;
    min-width: 600px;
}

.. HTML

<div id="content">
   <div id="left">very less text and images in this cell</div>
   <div id="middle" style="<?php echo $middleWidth;?>">I have lot lots of images, hyperlinks and text in this page</div>
   <div id="right">very less text and images in this cell</div>
</div>

PHP

<?php
   //some calculations..
   $middleWidth = '602'.'px'; 
   //this value is dynamic, I might get from 600px to any value that can be divided to get 0 remainder.
?>

当网站加载页面闪烁时，我可以看到中间内容的宽度为 800 像素，即内容 div 的宽度减去左侧 div 的宽度。即使我给出最小宽度、最大宽度，flickr 也不会停止。

对我来说还有一个挑战是应该在 IE 上运行。

请帮帮我..

【问题讨论】：

你能在小提琴中复制这个问题吗？
不应该 $middleWidth 是 $middleWidth = '602'.'px';。还有<div id="middle" style="width: <?php echo $middleWidth;?>">
嘿，柯克，很抱歉，这也是一个错误。现在更新了。对不起兄弟。。

标签： php html css css-float css-tables

【解决方案1】：

这个语法不正确

<div id="content">
   <div id="left">very less text and images in this cell</left>
   <div id="middle" style="<?php echo $middleWidth;?>">I have lot lots of images, hyperlinks and text in this page</middle>
   <div id="right">very less text and images in this cell</right>
</div>

</left> </middle> 和 </right> 无效 html。只需正常关闭 div </div>

【讨论】：