html - 边框转到上面的 div 的奇怪问题？

Question

我希望我的带边框的 div 看起来像:

整洁，只是包裹在两个 img div 正下方的 div 周围。 (添加一个连字符或句点将 div 分隔开，让它在下面)。

但是，我得到了

它看起来像在什么地方上升并 Hook 到上面的 div — 想法？

这是我的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 属性。 float 元素之后的元素将围绕它流动。为避免这种情况，请使用 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 上编辑它.