CSS - 如何显示全角 div 内的一对 DIV 内联？答案

【问题标题】：CSS - How to display pair of DIV's inline, that are inside a full-width div?CSS - 如何显示全角 div 内的一对 DIV 内联？
【发布时间】：2015-10-20 18:58:56
【问题描述】：

我有一些 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 inline 的内容（我可以使用#counter .item { float: left } 来完成），然后将其放在#text 旁边。

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

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

感谢任何帮助或指导。

【问题讨论】：

你能张贴一张你目前拥有什么以及你想要什么的图片吗？

标签： html css drupal-7

【解决方案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>

【讨论】：