Question

来自http://webdesign.about.com/od/htmltags/p/aadivtag.htm

在HTML 4中，DIV元素不能位于另一个块级元素内，就像P元素一样。但是，在HTML5中，DIV元素可以在里面找到，并且可以包含其他流内容元素，如P和DIV。

我在表格中有这样的东西

<p> <label...> <input...> </p>

但是当Rails自动生成一个包含输入的error_explanation div时，一个段落变为两个，我在Firebug中看到了这个：

<p> <label...> </p> <div...> <input...> </div> <p> </p>

另外，如果我只是添加一个简单的

<p> <div> test </div> </p>

出现同样的问题（JSFiddle），它会在DOM中呈现为

<p> </p> <div> test </div> <p> </p>

为什么？

更新：我通过电子邮件发送了该文章的作者，并做了相应的更改。

Answer 1

来自fine specification：

p - 段

[...]

允许的内容

短语内容

这是什么短语内容？ Phrasing content：

由与普通字符数据混合的短语元素组成。

正常字符数据就是：未标记文本。 Phrasing elements是：

或 em 或 strong ... [一堆其他元素 div ]

因此，<p><div></div></p>不是有效的HTML。根据规范中列出的标记省略规则，<p>标记会自动由<div>标记关闭，从而使</p>标记不会匹配<p>。浏览器完全有权通过在<p>之后添加一个开放的<div>代码来尝试更正它：

<p></p><div></div><p></p>

您不能将<div>放在<p>内，并从各种浏览器中获得一致的结果。为浏览器提供有效的HTML，它们会表现得更好。

您可以将<div>放在<div>内，但如果您将<p>替换为<div class="p">并对其进行适当设置，则可以得到您想要的内容。

您在about.com上的引用不同意w3.org上的规范，您的引用会误导您。

Answer 2

虽然这是一个相当陈旧的问题，但我认为我会分享我的问题解决方案，以帮助其他可能在Google上偶然发现此页面的人。

如前所述，不允许将块元素放在p-tag中。然而，在实践中，这实际上并非完全正确。实际显示值实际上完全不相关;唯一考虑的是标签的默认显示值，例如＆＃34;块＆＃34;对于div和＆＃34;内联＆＃34;用于跨度。更改显示值仍会使浏览器过早关闭p-tag。

然而，这也是相反的方式。您可以设置span-tag的样式，使其行为与div-tag完全相同，但仍然可以在p环境中接受。

所以不要这样做：

<p>
   <div>test</div>
</p>

你可以这样做：

<p>
   <span style="display:block">test</span>
</p>

请记住，浏览器会递归地验证p环境的内容，所以即使是这样的话：

<p>
   <span style="display:block">
       <div>test</div>
   </span>
</p>

将导致以下结果：

<p>
   <span style="display:block"></span>
</p>
<div>test</div>
<p>
</p>

希望这会帮助那些人：）

Answer 3

webdesign.about.com页面完全错误;他们可能误解了HTML5草稿。在P内部允许DIV会引起很大的混乱;我不认为在HTML5开发过程中曾经考虑过它。

如果您尝试在P中使用DIV，则DIV开始标记将隐式关闭P元素。这可能解释了你所见过的事情。

要避免此问题，请勿在内容包含或包含DIV元素时使用P.改为使用DIV。

Answer 4

无法在<div>内的<p>内放置<div>元素，因为开始<p>标记会自动关闭<P>元素。

<span>不允许其中的其他元素。仅允许<strong>和<p></p>元素。在private void viewActionPerformed(java.awt.event.ActionEvent evt) { showData(); } public void showData() { Connection con=null; Statement st=null; ResultSet rs=null; String s; try { con=DriverManager.getConnection("jdbc:mysql://localhost/testm","root","root"); st=con.createStatement(); s="select * from smpl"; rs=st.executeQuery(s); ResultSetMetaData rsmt= rs.getMetaData(); int c=rsmt.getColumnCount(); Vector column=new Vector(c); for(int i=1;i<=c;i++) { column.add(rsmt.getColumnName(i)); } Vector data= new Vector(); Vector row= new Vector(); while(rs.next()) { row=new Vector(c); for(int i=1;i<=c;i++) { row.add(rs.getString(i)); } data.add(row); } JFrame smp=new JFrame(); smp.setSize(1000,500); // smp.setLocation(0, 300); //smp.setUndecorated(true); smp.setLocationRelativeTo(null); smp.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JPanel panel=new JPanel(); // paneldes.setLocation(20, 100); JTable table= new JTable(data,column); JScrollPane jsp= new JScrollPane(table); panel.setLayout(new BorderLayout()); //paneldes.setLocation(100, 200); panel.add(jsp,BorderLayout.CENTER); // paneldes.add(jsp); // jsp.setLocation(100, 200); this.setContentPane(panel); this.setVisible(true); SwingUtilities.getAncestorOfClass(null, jsp); } catch(Exception e) {JOptionPane.showMessageDialog(null,"ERROR"); }finally{ try{ st.close(); rs.close(); con.close(); }catch(Exception e){ JOptionPane.showMessageDialog(null,"ERROR CLOSE"); }}} public static void main(String args[]) { java.awt.EventQueue.invokeLater(new Runnable() { public void run() { new smplvi().setVisible(true); } }); }中，我们只能添加与文本相关的标记。 refer this link to know more

将<div>放在<p>中是添加一个额外的</p> <p> </p> </div>

4 个答案: