Question

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

这是我目前的 CSS 和 HTML

＆＃13;

    

// 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;
}

＆＃13;

      <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>

＆＃13;

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

真实问题

对不起，我不相信我明白了问题。当视口大小减少到 768px 以下时，第二个子元素（ infoBox ）会浮动到下一行。我相信。如果视口大小大于~768px，则父元素将按预期展开。

Answer 1

您必须使用CSS Media Query为特殊大小编写特定的CSS https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

module M : sig
  type t = < x : int; y : int >
  type opaque

  val make : int -> int -> opaque

  val f : opaque -> unit

  val of_opaque : opaque -> t
end = struct
  type t = < x : int; y : int >
  type opaque = < t; z : [`Not_exposed] >

  let make x y = object
    method x = x
    method y = y
    method z = `Not_exposed
  end

  let f (o : opaque) =
    assert (o#z = `Not_exposed)

  let of_opaque (o : opaque) : t =
    (o :> t)
end

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

... Soooooo

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

<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>

AND Voila！

我的灯箱按照我的预期工作。我有其他媒体查询来处理孩子们如何在移动设备上进行堆叠。

我仍然对其他建议持开放态度，但这无需借助重组布局（FlexBox）就解决了我的问题最快。

感谢您的意见。

div漂浮到下一行

2 个答案: