html - CSS:在不使用表格的情况下显示尽可能窄的图像列

Question

我有一个显示文本的网页，右侧是 Logo 列表。 HTML 看起来像这样:

<div class="contentArea">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Cras quis justo porta elit sollicitudin consequat ut in massa.
       etc. etc.
    </p>
</div>
<div class="logoArea">
    <img src="http://dummyimage.com/300x100">
    <br/>
    <img src="http://dummyimage.com/400x100">
    <br/>
    <img src="http://dummyimage.com/200x100">
</div>

要获得左侧的 contentArea 和右侧的 logoArea，我有以下 CSS:

<style>
    .contentArea {
        display: table-cell;
    }

    .logoArea {
        display: table-cell;
        width: 1%;
    }
</style>

这很好用。 Logo 区域与最宽的 Logo 一样宽，这一点很重要。但是，使用 display table-cell 看起来很奇怪而且被误用了。在 CSS 中执行此操作的推荐方法是什么？自 2012 年以来，我必须支持浏览器，例如必须支持Android 4.1.2。

我说的网站是www.admiraalit.nl .

Answer 1

你可以试试 CSS flexbox .

对于浏览器支持，检查以下 link .

这是一个简单的例子:

.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.wrapper > div {
  border: 1px solid #000;
  padding: 5px;
}
.content {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

<div class="wrapper">

  <div class="content">
    this is the content area
  </div>

  <div class="sidebar">
    sidebar
  </div>

</div>