html - CSS - 如何显示全 Angular div 内的一对内联 DIV？

Question

我有一些 HTML，由 Drupal 和 Views Slideshow 生成，(通常)看起来像:

<div id="banner">
  <div id="image1" class="hidden"> Image .. </div>
  <div id="text1" class="hidden"> Text .. </div>
  <div id="image2" class="active"> Image .. </div>
  <div id="text2" class="active"> Text .. </div>
</div>
<div id="counter">
  <div class="item1 hidden">1</div>
  <div class="item2 active">2</div>
</div>
</div>

#banner 的内容(图像和文本)周期性地轮换，#counter 的内容显示一个子弹图像来标识事件图像，该图像是通过依次为每个#counter 子元素添加和删除 CSS 来选择的。输出有点类似于 http://www.slidesjs.com/ , 添加的文本行除外。

我省略了实际的 CSS 和 HTML，因为它们相当冗长。

我正在尝试内联显示#counter 的内容(我可以使用#counter .item { float: left } 来实现)，然后将它放在#text 旁边。

我无法将#content 放在#text 旁边，如果可能，只能通过 CSS。

希望这很清楚。我很难用语言表达这一点。

如有任何帮助或指导，我们将不胜感激。

Answer 1

这是您要找的吗？如果没有，您能否提供您正在寻找的示例图片。

.wrapper {
  width: 100%;
}

#banner {
  width: 50%;
  float: left;
}

#counter {
  width: 50%;
  float: left;
}

<div class="wrapper">
  <div id="banner">
    <div id="image1" class="hidden"> Image .. </div>
    <div id="text1" class="hidden"> Text .. </div>
    <div id="image2" class="active"> Image .. </div>
    <div id="text2" class="active"> Text .. </div>
  </div>
  <div id="counter">
    <div class="item1 hidden">1</div>
    <div class="item2 active">2</div>
  </div>
</div>