Question

在下面的代码中，我希望类card-custom的div与内联display: flex的div内联/相邻。

我认为我尝试的很容易，但我无法找到显示和浮动的正确组合以使其正常工作。

我尝试使用.maxWidth { width: 100%; max-width: 1370px; margin: 60px auto; padding: 0 20px; } .card-columns { column-count: 5; } .intermission { color: blue; column-span: all; border: 2px solid; } .card-custom { border: 1px solid blue; width: 430px; height: 220px; }使父div成为flex，希望它能正常工作。但是，虽然它与它并列，但它搞砸了第一个div的大小。

有人可以帮我告诉我，我做错了吗？

我在这里有一个codepen示例http://codepen.io/anon/pen/grxRza

＆＃13;

   
  <!-- intermission column span full -->
  <div class="intermission">
    
    <div class="card-custom">
    </div>
    
  <div class="card-columns">
    
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
    
    
    <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
    
    <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
    
    </div><!-- end intermission card-columns -->
  </div><!-- end intermission div-->

＆＃13;

Answer 1

你走在正确的轨道上。

将display: flex添加到父div：

.intermission {
  display: flex;   /* NEW */
  color: blue;
  border: 2px solid;
}

第一个div将缩小有两个原因：

弹性容器的初始设置为flex-shrink: 1。这意味着允许flex项目缩小（防止它们溢出容器）。
Flex容器的另一个初始设置是flex-wrap: nowrap。这意味着Flex项目仅限于一行，允许flex-shrink: 1工作。

将flex-shrink: 0添加到第一个div以禁用缩小功能。

有关详细信息，请参阅此答案中的＆＃34; flex-shrink因素＆＃34; 部分：https://stackoverflow.com/a/34355447/3597276

Revised Codepen

＆＃13;

.intermission {
  display: flex;
  color: blue;
  border: 2px solid;
}
.card-columns {
  column-count: 5;
}
.card-custom {
  border: 1px solid blue;
  width: 430px;
  height: 220px;
  flex-shrink: 0; /* NEW */
}

＆＃13;

<link href="http://afkweb.com/etc/bootstrap-4-alpha/bootstrap.css" rel="stylesheet"/>
<div class="intermission">
  <div class="card-custom"></div>
  <div class="card-columns">
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title that wraps to a new line</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title that wraps to a new line</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title that wraps to a new line</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

你试过左或右浮？确保card-column和card-custom的总宽度不超过div或包含它们的元素的总宽度。此外，引导网格系统将有助于轻松解决此问题。

Answer 3

只需将此添加到您的css

即可

In [261]:
cols = df.columns
df1 = df.unstack('i2')
df1.columns = cols.set_levels(df.index.get_level_values(1), level=1)
df1

Out[261]:
          c1                                      c2                      \
i2         f         a         w         h         f         a         w   
i1                                                                         
x  -1.386403 -0.566924  0.007553 -0.189557 -1.108989  0.114203 -1.198163   
y   1.211754  1.270087  0.438575 -0.546983  1.943406  0.757389  0.286259   


i2         h  
i1            
x  -0.505088  
y  -0.629366

试图将两个div对齐并且失败

3 个答案: