Question

我似乎有一个p包装其他内容的问题。

如果我在3个div元素和.disc之间添加了一些额外的HTML元素，它就可以了。

但是，当我按照下面的代码所示放置它们时，似乎p包裹了3个div元素 - 即它们出现在p内。

我在他们自己的div中也有3 margin个元素，然而，它们会显示为＆＃34;光盘的一部分＆＃34;类。

最初，我指的是一个完整的全面margin。然后，在寻找这个问题的原因时，我遇到了崩溃的边缘。所以，我已经更改了我的.abbr { float: left; display: inline-block; width: 30%; text-align: center; background-color: white; border: 2px solid black; margin: 15px 26px; font-weight: bold; } .disc { margin-top: 2em; margin-left: 2em; border: 2px solid black; text-align: center; background-color: white; } #discHeader { font-weight: bold; } #discHeaderLine { border-top: 2px solid black; }以仅反映了顶部和左侧的值，但这似乎也没有解决问题。

为什么会这样？

＆＃13;

<p class="abbr">Line 1</p>
<p class="abbr">Line 2</p>
<p class="abbr">Line 3</p>

<div class="disc">
  <p id="discHeader"><strong>ABC</strong></p>
  <p class="clear line" id="discHeaderLine"></p>
  <p>some text</p>
  <p>some more text</p>
  <p>text</p>
  <p>final text</p>
</div>

＆＃13;

Declare @SearchFor  varchar(max) ='Daily,Production,default'  -- Any comma delim string
Declare @SearchFrom varchar(150) ='OD'                        -- table or even a join statemtn
Declare @SearchExpr varchar(150) ='[OD-Title]'                -- Any field or even expression
Declare @ReturnCols varchar(150) ='[OD-Nr],[OD-Title]'        -- Any field(s) even with alias 

Set @SearchFor = 'Sign(CharIndex('''+Replace(Replace(Replace(@SearchFor,' , ',','),', ',''),',',''','+@SearchExpr+'))+Sign(CharIndex(''')+''','+@SearchExpr+'))'
Declare @SQL nvarchar(Max) = 'Select * from (Select Distinct'+@ReturnCols+',Hits='+@SearchFor+' From '+@SearchFrom + ') A Where Hits>0 Order by Hits Desc' 

Exec(@SQL)

＆＃13;

Answer 1

您的问题

您正在使用float:left

解释+通常的解决方案

float CSS属性指定应该从中获取元素正常流动并沿其左侧或右侧放置容器，其中文本和内联元素将环绕它。

因为它是从正常流程中取出的，所以需要使用clear属性将其清除。

clear CSS属性指定元素是否可以在旁边   在它之前的浮动元素或必须向下移动（清除）   在他们之下。 clear属性适用于浮动和   非浮动元素。

要清除的float是较早的float   在相同的块格式化上下文中。

针对您的问题的具体解决方案

如果您使用inline-block，则不需要float:left，因为inline-block使元素成为块级元素，float:left使元素成为块元素也是如此。

因此无需清除任何内容。

＆＃13;

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
.wrap {
  margin-left: 2em
}
.abbr {
  display: inline-block;
  width: calc(100%/3);
  text-align: center;
  background-color: white;
  border: 2px solid black;
  margin: 15px 0;
  font-weight: 700
}
.disc {
  margin-top: 2em;
  margin-left: 2em;
  border: 2px solid black;
  text-align: center;
  background-color: white;
}
#discHeader {
  font-weight: bold;
}
#discHeaderLine {
  border-top: 2px solid black;
}

＆＃13;

<div class="wrap">
  <p class="abbr">Line 1</p><!--
--><p class="abbr">Line 2</p><!--
--><p class="abbr">Line 3</p>
</div>
<div class="disc">
  <p id="discHeader"><strong>ABC</strong>
  </p>
  <p class="clear line" id="discHeaderLine"></p>
  <p>some text</p>
  <p>some more text</p>
  <p>text</p>
  <p>final text</p>
</div>

＆＃13;

Answer 2

您可以尝试这种方式来清除浮动。

body {
	margin:0;
	padding:0;
}
.content {
	display:inline-block;
	width:100%;
}
.content p {
	float:left;
	width:28%;
	text-align: center;
	background-color: white;
	border: 2px solid black;
	margin: 15px 2%;
	font-weight: bold;
}
.disc {
	width:96%;
	margin:2em auto 0 auto;
	border: 2px solid black;
	text-align: center;
	background-color: white;
}
#discHeader {
	font-weight: bold;
}
#discHeaderLine {
	border-top: 2px solid black;
}

<div class="content">
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
</div>
<div class="disc">
  <p id="discHeader"><strong>ABC</strong></p>
  <p class="clear line" id="discHeaderLine"></p>
  <p>some text</p>
  <p>some more text</p>
  <p>text</p>
  <p>final text</p>
</div>

Answer 3

您的abbr元素已浮动。将clear: both;添加到.disc：

＆＃13;

.abbr {
  float: left;
  display: inline-block;
  width: 30%;
  text-align: center;
  background-color: white;
  border: 2px solid black;
  margin: 15px 26px;
  font-weight: bold;
}
.disc {
  margin-top: 2em;
  margin-left: 2em;
  border: 2px solid black;
  text-align: center;
  background-color: white;
  clear: both;
}
#discHeader {
  font-weight: bold;
}
#discHeaderLine {
  border-top: 2px solid black;
}

＆＃13;

<p class="abbr">Line 1</p>
<p class="abbr">Line 2</p>
<p class="abbr">Line 3</p>

<div class="disc">
  <p id="discHeader"><strong>ABC</strong></p>
  <p class="clear line" id="discHeaderLine"></p>
  <p>some text</p>
  <p>some more text</p>
  <p>text</p>
  <p>final text</p>
</div>

＆＃13;

div包装其他内容

3 个答案:

您的问题

解释+通常的解决方案

针对您的问题的具体解决方案