Question

我遇到了问题，我不知道如何修复它。

所以这是：

我试图一个接一个地显示多个文本块。所有这些都包含在漂亮的文本块中。为了实现块我使用具有设置宽度的div。在我用FF测试我的代码之前，这一切都很好看，并且猜猜是什么？我的小宝贝伸展或挤压包围内容。如何让它们在FF中正确显示？ Chrome和IE运行良好。

这是我用于文本块的代码：

的CSS：

#block {
    border: 2px dashed grey;
    background-color:  #D3D3D3;
    width: 338 px;
    margin-top: 10px;
}

.left {
float:right;
margin-right: 10px;
}

HTML：

<div id="block" class="left">
    <p>A long line of text that should take more than one line to display, 
       because I like long sentences - it is easy to get lost in them and 
       forget what you were writing about.</p>
</div>

<div style="clear:both"></div>

<div id="block" class="left">
    <p>two words</p>
</div>

非常感谢你。就像真的一样。

Answer 1

使用div的max-width:属性。

width: 338px;
max-width: 338px;

Answer 2

您是否尝试过添加max-width和min-width代码以及width代码？这可能会强制它仅在FireFox以及Chrome和Internet Explorer中以特定大小显示

Answer 3

这可能不是解决方案，但您需要小心，因此在具有相同ID的页面上只有 1 项。我看到你正在将所有这些ID设置为阻止。您可能希望将其设置为类，然后将DIV的类作为两个类，例如：

的CSS：

.block {
       border: 2px dashed grey;
       background-color:  #D3D3D3;
       width: 338px;
       margin-top: 10px;
   }

.left {
      float:right;
      margin-right: 10px;
}

HTML：

<div class="block left">
    <p>A long line of text that should take more than one line to display, 
       because I like long sentences - it is easy to get lost in them and 
       forget what you were writing about.</p>
</div>

<div style="clear:both"></div>

<div class="block left">
    <p>two words</p>
</div>

另外，在CSS中设置“px”属性时，请确保一致。确保它与数字之间没有任何空格（就像你在块类的宽度属性中一样）

Answer 4

Rince，你的问题非常简单。当您在338中放置px和width:之间的空格时，FireFox无法将其解释为单位，因此它会忽略该行。只需删除空间，它就会非常简单

将宽度设置为元素

4 个答案: