div漂浮到下一行 [英] div floats to next line

问题描述

我有一个原型灯箱，如果其中的文本超过28个字符，它将浮动第二个元素。我做错了什么？

这是我目前使用的 CSS 和 HTML 。

// Parent Div.lightbox-item {z-index：8200;上：50vh;左：50vw;宽度：自动;最大高度：650px;身高：自动;显示：inline-block;背景：#fff; position：fixed;} //第一个子div.lightbox-item .avatarBox {height：155px; width：155px;位置：相对;向左飘浮;填充：0; background; green;} //第二个子div.lightbox-item .infoBox {padding：10px 5px 0 0;高度：自动位置：相对;宽度：自动;向左飘浮; background：orange;} // Third Child div.lightbox-item .person-info-wrap {width：100％;显示：block！important;位置：相对; z-index：5;身高：自动; clear：left;} //嵌入在2nd&内的辅助元素第3个子div.lightbox-item .infoBox .gallery-member_fullname {margin：0 auto; line-height：1em; text-align：left;}。lightbox-item .infoBox .gallery-member_title {margin：0 auto; line- lightbox-item .infoBox .gallery-member_company {margin：0 auto; line-height：1em; text-align：left;}。lightbox-item .infoBox .gallery-company_location {margin：0 auto; line-height：1em; text-align：left;}。保证金：0汽车;背景颜色：红色;颜色：#fff;宽度：自动;身高：自动; min-height：275px;}。lightbox-item .person-info h3 {text-transform：uppercase; font-size：1.5em; font-weight：600; font-family：Lato，sans-serif; line-height：30px; width：320px;保证金：0汽车; text-align：center;}

< div class = lightbox-itemstyle =opacity：1; transform：matrix（1,0,0,1,224.5，-226）;> < div class =avatarBox>< / div> < div class =infoBox> < h2 class =gallery-member_fullname>比尔盖茨< / h2> < div class =gallery-member_title>创始人< / div> < div class =gallery-member_company> Bill and Melinda Gates Found< / div> < div class =gallery-company_location>纳什维尔，田纳西州28277< br>美国< / div> < / DIV> < div class =person-info-wrapstyle =opacity：1;> < div class =person-info> < h3>活跃委员会< / h3> < ul class =subList> < li class =subList-item>< / li> < / UL> < / DIV> < / DIV> < / div>

左边和第三个元素设置为阻止并向左清除。我试图实现的结果是，如果文本在第二个子元素中展开，则父容器（ lightbox-item ）也应该展开。

真正的问题

对不起，我不相信我做了我的问题明确。第二个子元素（ infoBox ）在视口尺寸减小到 768px 以下时浮动到下一行。我相信。如果视口大小大于〜768像素，则父元素会展开。

=jsdata-hide =falsedata-console =truedata-babel =false>

  .lightbox-item {z-index：8200;上：50vh;左：50vw;宽度：自动;身高：自动;显示：inline-block;背景：#fff;位置：固定; }  

< div class =lightbox-itemstyle =不透明度：1;变换：矩阵（1,0,0,1,224.5，-226）;> < div class =avatarBox>< / div> < div class =infoBox> < h2 class =gallery-member_fullname>比尔盖茨< / h2> < div class =gallery-member_title>方正< / div> < div class =gallery-member_company> Bill和Melinda Gates Found< / div> < div class =gallery-company_location>纳什维尔，田纳西州28277< br>美国< / div> < / DIV> < div class =person-info-wrapstyle =opacity：1;> < div class =person-info> < h3>活动委员会< / h3> < / DIV> < / DIV> < / div>

Soooooo ....

经过一些修补和2杯咖啡之后。我将父div从 display：inline-block 更改为 display：inline-table 请参阅下面的更改。

  .lightbox-item {
 z-index：8200; 
 top：50vh;剩余
：50vw; 
宽度：auto; 
身高：汽车; 
显示：inline-table; 
背景：#fff; 
位置：固定; 
} 
  

AND VOila！

我的灯箱按照我的期望工作。我有其他媒体查询来处理孩子们在移动设备上的堆叠情况。

我仍然乐于接受其他建议，但这最快解决了我的问题，无需诉诸重构布局（FlexBox）。

感谢您的输入。

I have a prototype lightbox that will float the second element if the text within it exceeds 28 characters. What am I doing wrong??

This is my current CSS and HTML

    

// Parent Div
.lightbox-item {
  z-index: 8200;
  top: 50vh;
  left: 50vw;
  width: auto;
  max-height: 650px;
  height: auto;
  display: inline-block;
  background: #fff;
  position: fixed;
}
// First Child div
.lightbox-item .avatarBox {
  height: 155px;
  width: 155px;
  position: relative;
  float: left;
  padding: 0;
  background: green;
}
// Second Child div
.lightbox-item .infoBox {
  padding: 10px 5px 0 0;
  height: auto
  position: relative;
  width: auto;
  float: left;
  background: orange;
}
// Third Child div
.lightbox-item .person-info-wrap {
  width: 100%;
  display: block !important;
  position: relative;
  z-index: 5;
  height: auto;
  clear: left;
}

// Secondary elements nested inside 2nd & 3rd Child div
.lightbox-item .infoBox .gallery-member_fullname{margin: 0 auto;line-height:1em;text-align:left;}
.lightbox-item .infoBox .gallery-member_title{margin: 0 auto;line-height:1em;text-align:left;}
.lightbox-item .infoBox .gallery-member_company{margin: 0 auto;line-height:1em;text-align:left;}
.lightbox-item .infoBox .gallery-company_location{margin: 0 auto;line-height:1em;text-align:left;}

.lightbox-item .person-info {
  padding: 10px 0 25px 0;
  margin: 0 auto;
  background-color: red;
  color: #fff;
  width: auto;
  height: auto;
  min-height: 275px;
}

.lightbox-item .person-info h3 {
  text-transform: uppercase;
  font-size: 1.5em;
  font-weight: 600;
  font-family: "Lato", sans-serif;
  line-height: 30px;
  width: 320px;
  margin: 0 auto;
  text-align: center;
}

      <div class="lightbox-item" style="opacity: 1; transform: matrix(1, 0, 0, 1, -224.5, -226);">
      <div class="avatarBox"></div>
      <div class="infoBox">
        <h2 class="gallery-member_fullname">Bill Gates</h2>
        <div class="gallery-member_title">Founder</div>
        <div class="gallery-member_company">Bill and Melinda Gates Found</div>
        <div class="gallery-company_location">Nashville, TN 28277
          <br>United States</div>
      </div>
      <div class="person-info-wrap" style="opacity: 1;">
        <div class="person-info">
          <h3>Active committees</h3>
          <ul class="subList">
            <li class="subList-item"></li>
          </ul>
        </div>
      </div>
    </div>

I have the first 2 divs floating to the left and then the 3rd element is set to block and clearing left. The result I'm trying to achieve is so that if the text expands in the 2nd child element the parent container ( lightbox-item) should expand as well.

THE REAL ISSUE

Sorry, I don't believe I made my problem clear. The second child element(infoBox) floats to the next line when the viewport size decrease below 768px I believe. The parent element expands as expect if viewport size is greater than ~768px.

解决方案

    .lightbox-item {
      z-index: 8200;
      top: 50vh;
      left: 50vw;
      width: auto;
      height: auto;
      display: inline-block;
      background: #fff;
      position: fixed;
    }

<div class="lightbox-item" style="opacity: 1; transform: matrix(1, 0, 0, 1, -224.5, -226);">
       <div class="avatarBox"></div>
        <div class="infoBox">
          <h2 class="gallery-member_fullname">Bill Gates</h2>
          <div class="gallery-member_title">Founder</div>
          <div class="gallery-member_company">Bill and Melinda Gates Found</div>
          <div class="gallery-company_location">Nashville, TN 28277<br>United States</div>
        </div>
        <div class="person-info-wrap" style="opacity: 1;">
          <div class="person-info">
            <h3>Active committees</h3>
          </div>
        </div>
      </div>

Soooooo....

After some tinkering and 2 cups of coffee later. I changed the parent div from display: inline-block to display: inline-table See the change below.

.lightbox-item {
  z-index: 8200;
  top: 50vh;
  left: 50vw;
  width: auto;
  height: auto;
  display: inline-table;
  background: #fff;
  position: fixed;
}

AND Voila!

My lightbox works as I am expecting. I have other media queries to handle how the children divs stack on mobile.

I'm still open to other suggestions but this solved my problem the quickest without having to resort to restructuring the layout ( FlexBox).

Thanks for your input.

这篇关于div漂浮到下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！