Question

我有两个div：＆＃39; Div 1＆＃39;和＆＃39; Div 2＆＃39;。＆＃39; Div 1＆＃39;必须在左侧，＆＃39; Div 2＆＃39;在右侧，它们都在同一行，而在它们之间没有任何东西。

下面我有两个p标签：＆＃39; p 1＆＃39;和＆＃39; p2＆＃39;。我需要将它们设置为内联样式，彼此相邻，但它们必须保持在div之下。

我对样式div没有问题。我可以使用float：left for＆＃39; Div 1＆＃39;和浮动：适用于＆＃39; Div 2＆＃39;。问题在于p标签。我试图使用clear：两个属性但在这种情况下它不起作用。我的p标签浮动在＆lt; Div 1＆＃39;旁边，而不是留在div下面。如何设置p标签以保持内联，低于div？

＆＃13;

div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

#first-div {
    float: left;
}

#second-div {
    float: right;
}

p {
    clear: both;
    width: 80px;
    border: 2px dotted red;
    display: inline;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="first-div">Div 1.</div>
    <div id="second-div">Div 2.</div>
    <p>p 1</p>
    <p>p 2</p>
</body>
</html>

＆＃13;

Answer 1

你可以包装div。然后使用pseudoelement clear属性。

根据@Scoots评论，使用display: table代替display: block 作为clearfix 可能会有一个优势。

.wrapper>div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.wrapper::after {
  display: block;
  content: '';
  clear: both;
}

#first-div {
  float: left;
}

#second-div {
  float: right;
}

p {
  width: 80px;
  border: 2px dotted red;
  display: inline;
}

<div class="wrapper">
  <div id="first-div">Div 1.</div>
  <div id="second-div">Div 2.</div>
</div>
<p>p 1</p>
<p>p 2</p>

根据评论进行更新

您可以在第二个div之后的:before上使用<p>伪元素。然而，这有点破坏边界的缺点。

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}


#first-div {
  float: left;
}

#second-div {
  float: right;
}

#second-div + p::before {
  content: '';
  display: block;
  clear: both;
}

p {
  border: 2px dotted red;
  width: 80px;
  display: inline;
}

<div id="first-div">Div 1.</div>
<div id="second-div">Div 2.</div>
<p>p 1</p>
<p>p 2</p>

Answer 2

div#first-div,  div#second-div{
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

#first-div {
    float: left;
}

#second-div {
    float: right;
}

p {
    width: 80px;
    border: 2px dotted red;
    display: inline;
}

.clearBoth{
  clear:both;
}

<div id="first-div">Div 1.</div>
<div id="second-div">Div 2.</div>

<div class="clearBoth">
  <p>p 1</p>
  <p>p 2</p>
</div>

<p>标签显示为内联，位于两个浮动div之下

2 个答案: