html - 如何从网格中获取 'disconnect' 元素？

Question

我有一个网站，其中包含一些代码模块，如下所示。您可以从 Bootstrap 更改网格系统的大小。所以这就是为什么我的网格是第一行。使用我当前的代码，它看起来像这样:

.label{
   background-color: #F0A;
   padding: 10px;
  }
 
 .image{
  background-color: #000;
  color: #FFF;
  padding: 40px;
 }

<div class="col-xs-12 col-sm-6 col-md-4">
  <div class="content">
        <p class="label">Label</p>
        <div class="image">
           <p>Image</p>
        </div>
  </div>
</div>

但我希望它看起来像这样:

我不想在我的模块中使用网格，因为它也必须在其他尺寸下工作。如果那有意义。我怎样才能使我的标签与网格“断开连接”？

Answer 1

您可以重置显示，使其表现为内联框。

display 的选项可以是:inline, inline-block, inline-table, inline-flex、inline-grid 甚至 display:table 以保持 block 行为但缩小内容。

inline-block 似乎是有史以来最常用和兼容的选项。

.label{
   background-color: #F0A;
   padding: 10px;
   display:inline-block;
  }
 
 .image{
  background-color: #000;
  color: #FFF;
  padding: 40px;
 }

<div class="col-xs-12 col-sm-6 col-md-4">
  <div class="content">
        <p class="label">Label</p>
        <div class="image">
           <p>Image</p>
        </div>
  </div>
</div>

如果 display 不是您想要的，那么 float:left; 也可以

.label{
   background-color: #F0A;
   padding: 10px;
   float:left;
  }
 
 .image{
 clear:both; /* clear the float */
  background-color: #000;
  color: #FFF;
  padding: 40px;
 }

<div class="col-xs-12 col-sm-6 col-md-4">
  <div class="content">
        <p class="label">Label</p>
        <div class="image">
           <p>Image</p>
        </div>
  </div>
</div>