奇怪的问题是上面的边框 div？

Question

我希望我的边框 div 看起来像：

整洁，刚好包裹在两个 img div 正下方的 div 周围。（添加连字符或句号将 div 分隔开，让它在下方）。

但是，我得到

它看起来像在上升并与上面的 divs — 想法挂钩？

这是我的css：

tallcrop {
    width: 49%;
    height: 55vh;
    overflow: hidden;
    float: left;
    align: left;
    display: inline-block;}

tallcrop img{
    position:center;
    height: 100%;
    object-fit: cover;}

.leftside {
  margin-top: .5%;
  padding-right: 1%; 
  padding-bottom: 1.5%;
  padding-top: 0%;}

.rightside {
  margin-top: .5%;
  padding-left: 1%; 
  padding-bottom: 1.5%;
  padding-top: 0%;}

fluid box {
  width: 100%;}

fluidbox p {
  border: .06em solid black;
  height: ;
  font-face:'ag';
  line-height: 1em;
  font-size: 3em;
  padding: 1%;
}

和HTML：

<!--Fires--> 
<tallcrop class="leftside">
  <img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c043674c0dbf745deee657/1505772425232/DSC_0909.jpg"></tallcrop>

<!--Small Editions--> 
<tallcrop class="rightside"><img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c04447be42d644772fc2bf/1505772633670/Small_Editions1.jpg"></tallcrop>

<!--Fluid--> 
<fluidbox>
  <p>On the Democratic <font face="ab">Fluidity</font> of Digital Artist Books</p></fluidbox>

Answer 1

您正在使用 float 进行左右对齐。如果你正在使用这个属性你必须需要使用 clear: both CSS 属性。浮动元素之后的元素将围绕它流动。为避免这种情况，请使用下面给出的 clear 属性或 clearfix hack。我在 tallcrop 标签下面添加了这个 HTML 标签：

<div class="clearfix"></div>

这里是 CSS:

.clearfix {
  clear: both;
}

这是演示：

tallcrop {
    width: 49%;
    height: 55vh;
    overflow: hidden;
    float: left;
    align: left;
    display: inline-block;}

tallcrop img{
    position:center;
    height: 100%;
    object-fit: cover;}

.leftside {
  margin-top: .5%;
  padding-right: 1%; 
  padding-bottom: 1.5%;
  padding-top: 0%;}

.rightside {
  margin-top: .5%;
  padding-left: 1%; 
  padding-bottom: 1.5%;
  padding-top: 0%;}

fluid box {
  width: 100%;}

fluidbox p {
  border: .06em solid black;
  
  font-face:'ag';
  line-height: 1em;
  font-size: 3em;
  padding: 1%;
}
.clearfix {
  clear: both;
}

<!--Fires--> 

<tallcrop class="leftside">
  <img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c043674c0dbf745deee657/1505772425232/DSC_0909.jpg"></tallcrop>

<!--Small Editions--> 
<tallcrop class="rightside"><img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c04447be42d644772fc2bf/1505772633670/Small_Editions1.jpg"></tallcrop>

<!--Fluid--> 

<div class="clearfix"></div> 
<fluidbox>
  <p>On the Democratic <font face="ab">Fluidity</font> of Digital Artist Books</p></fluidbox>

您也可以在 Codepen 上编辑它。

Answer 2

这是因为您还没有清除浮动，而且由于您使用的是自定义 html 元素，它不知道它是什么类型的元素（即内联、块等）。您可以使用以下方法修复您的代码：

fluidbox {  /* remove the space between fluid and box in your css */
  width: 100%;
  display:block;  /* make it a block element */
  clear:left;     /* clear your left float */
}

您的固定密码：

tallcrop {
  width: 49%;
  height: 55vh;
  overflow: hidden;
  float: left;
  display: inline-block;
}

tallcrop img {
  position: center;
  height: 100%;
  object-fit: cover;
}

.leftside {
  margin-top: .5%;
  padding-right: 1%;
  padding-bottom: 1.5%;
  padding-top: 0%;
}

.rightside {
  margin-top: .5%;
  padding-left: 1%;
  padding-bottom: 1.5%;
  padding-top: 0%;
}

fluidbox {
  width: 100%;
  display:block;
  clear:left;
}

fluidbox p {
  border: .06em solid black;
  line-height: 1em;
  font-size: 3em;
  padding: 1%;
}

.clearfix {
  clear: both;
}

<!--Fires-->

<tallcrop class="leftside">
  <img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c043674c0dbf745deee657/1505772425232/DSC_0909.jpg"></tallcrop>

<!--Small Editions-->
<tallcrop class="rightside"><img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c04447be42d644772fc2bf/1505772633670/Small_Editions1.jpg"></tallcrop>

<!--Fluid-->

<fluidbox>
  <p>On the Democratic
    <font face="ab">Fluidity</font> of Digital Artist Books</p>
</fluidbox>

奇怪的问题是上面的边框 div？

Strange issue with a border going to the above div?

html

css

border