Question

我有一个显示文本的网页，右边是一个徽标列表。 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>

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

我所谈论的网站是www.admiraalit.nl。

Answer 1

您可以尝试使用CSS flexbox。

要获得浏览器支持，请检查以下link。

这是一个简单的例子：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

CSS：在不使用表的情况下显示尽可能窄的图像列

1 个答案: