Question

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

this

整洁，只是缠绕在两个img div下面的div。（添加连字符或句点将div分隔开来并让它在下面）。

但相反，我正在

this

它看起来像上升并挂钩上面的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的奇怪问题？

2 个答案: