Question

我有一个外部div和2个内部div - 一个左边的alignd，另一个紧挨着它。我遇到的问题是左边的div比右边短，然后右边环绕左边。

下面是我的html和CSS：

qRegisterMetaType

这是CSS：

<div id='green'>
  <div id="orange">test</div>
  <div id="red">
     Effects<br/>

        Add Class<br/>
     Color Animation<br/>
   Easing<br/>
  Effect<br/>
   Hide<br/>
        Remove Class  
       Show
     Switch Class
    Toggle
   Toggle Class
    </div>
</div>

我的问题是如何防止右边的div绕过左边？最好不要在右边的div上设置边距。

我还希望红色div始终位于橙色div的右侧，即使页面调整大小或在移动浏览器上查看页面，也不要在它下面或包裹它，

Answer 1

您可以使用flexbox。对上面的CSS使用以下更改：

#green{
  display: flex;
  align-content: top;
  padding-top: 0.75em;
  padding-bottom: 0.25em;
  padding-right: 1em;
  overflow: hidden;
  border:20px solid green;
}


#orange{
  align-self:flex-start;
  width: 185px;
  border:10px solid orange;
}

#red{
  width: 100%;
  border:5px solid red;
}

如果您希望#orange与#red的高度相同，请移除align-self: flex-start

演示：http://codepen.io/anon/pen/YwOjyP

Answer 2

我通过将display: inline-flex;添加到#green来实现它。

看：https://jsfiddle.net/4k1ohc10/

顺便说一句，您没有要求使用特定的浏览器，因此您可以查看此页面：http://caniuse.com/#feat=flexbox

防止div缠绕相邻的div

2 个答案: