Question

好吧我有3个div外面的div是一个列。所有3个div高度都是由其内容动态生成的。

<div class="outer" style="display:flex; flex-direction:column; float:left;">
   <div class="text 1" style="float:left; flex:1; background:red;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna. Nulla facilisi. Nulla gravida congue viverra. Vivamus maximus lacus dolor, sit amet vestibulum orci maximus tristique. Nam non metus nisl. Mauris gravida magna sed dolor venenatis malesuada. Sed in rutrum erat. Sed dictum est neque, sit amet consequat dolor dictum eget. Fusce sit amet dolor orci. Curabitur tempus vel erat ac dictum. Proin vel congue velit. Nam venenatis erat neque, at convallis mauris eleifend ultrices. In hac habitasse platea dictumst</p></div>
   <div class="text 2" style="float:left; flex:1; background:blue;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna.</p></div>
</div>

我已经为显示Flex应用了内联CSS。我在Firefox工作，但我确实有跨浏览器CSS，但我只是专注于让它在Firefox中工作并首先理解它。

我试图在这里完成的目标是使文本2与文本1完全相同。

我是这个整个弹性的新手，我相当肯定我这样做完全错了，我已经阅读了几个小时的文章，我尝试的一切都没有用。所以即时通讯假设我理解这一切都是错误的。

我不确定这是否重要，但这是在wordpress中完成的。一切都在向左浮动

我道歉，如果这是微不足道的，但我不知所措，Stackoverflow永远不会让我失望。任何帮助将不胜感激。

Answer 1

你离你想做的事情并不遥远。请注意，我从类名中删除了空格，因为空格是多个类的分隔符。 .1和.2是无效的类名。

您应该使用flex-direction: row;，因为您希望水平排列布局。我使用flex速记属性来达到所需的结果，即flex-grow，flex-shrink和flex-basis。

＆＃13;

.outer
{
  display: flex;
  flex-wrap: row nowrap;
}

.text1, .text2
{
  flex: 1 0;
}

.text1
{
  background-color: gray;
}

.text2
{
  background-color: darkgray;
}

＆＃13;

<div class="outer">
   <div class="text1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna. Nulla facilisi. Nulla gravida congue viverra. Vivamus maximus lacus dolor, sit amet vestibulum orci maximus tristique. Nam non metus nisl. Mauris gravida magna sed dolor venenatis malesuada. Sed in rutrum erat. Sed dictum est neque, sit amet consequat dolor dictum eget. Fusce sit amet dolor orci. Curabitur tempus vel erat ac dictum. Proin vel congue velit. Nam venenatis erat neque, at convallis mauris eleifend ultrices. In hac habitasse platea dictumst</p></div>
   <div class="text2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna.</p></div>
</div>

＆＃13;

此外，没有必要在flex元素上使用float。但它应该没有任何效果，如w3c：

浮动并清除不会创建弹性项目的浮动或间隙，并且不要把它带走。

CSS Display Flex。我不能让它工作

1 个答案: