Question

我正在尝试解决我遇到的问题。我有一个有3个漂浮孩子的父母div。我发布了上一个问题，但这只能部分解决我的问题。 SEE HERE可以参考。

所以问题是第二个子div的宽度是未知的。第1和第2个子div有固定的宽度。

第一个和第二个孩子有固定的高度。

将第3个子div设置为 display：block！important;明确：两者; width：100％; ，以便它进入下一行并占用父div的整个空间。

问题在于第二个子元素。由于宽度未知，可以动态改变。

我想要达到的目的是让第二个子div水平扩展但与第一个子div保持一致。

参考我之前的问题。使用 display：inline-table; 不允许内容在溢出时滚动。

.container {
  background: #ccc;
  overflow: hidden;
  float: left;
  padding:5px;
}
.floating-box {
  float: left;
  width: 150px;
  height: 75px;
  margin: 5px;
  border: 3px solid #73AD21;
}
.floating-box2 {
  float: left;
  width: auto;
  height: 75px;
  margin: 5px;
  border: 3px solid #73AD21;
}
.floating-box3 {
  float: left;
  clear: both;
  width: 100%;
  height: 75px;
  margin: 0;
  background: magenta;
}

<div class="container">
  <div class="floating-box">Floating box</div>
  <div class="floating-box2">Floating box Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus necessitatibus adipisci quisquam ducimus dolor fugit, officia perferendis harum temporibus laborum iure numquam, assumenda dignissimos neque, quod doloribus nihil autem dolores!</div>
  <div class="floating-box3">Floating box</div>
</div>

JSFiddle

Answer 1

谢谢，@ VXp。我引用了CodePen并使用了flexbox。这非常接近我试图实现的最终结果。

＆＃13;

    body {
      padding: 2em; 
    }

    .wrapper {
      display: flex;  
      flex-flow: row wrap;
      font-weight: bold;
      text-align: center;
    }

    .wrapper > * {
      padding: 10px;
      flex: 1 100%;
    }

    .aside-1 {
      background: gold;
      flex: 1 auto;
      height: 155px;
      max-width: 155px;
    }

    .main {
      text-align: left;
      background: deepskyblue;
      flex: 3 0px;
      order: 2;
      height: 155px;
    }

    .footer {
      background: lightgreen;
      order: 3;
    }

＆＃13;

    <div class="wrapper">
      <aside class="aside aside-1">Aside 1</aside>
      <article class="main">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
      </article>
      <footer class="footer">Footer</footer>
    </div>

＆＃13;

第二个浮动子元素与父级的下一行对齐

1 个答案: