Question

我有一些由Drupal和Views Slideshow生成的HTML（通常）看起来像：

<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旁边。

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

希望这很清楚。我很难将其写成文字。

感谢任何帮助或指示。

Answer 1

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

＆＃13;

.wrapper {
  width: 100%;
}

#banner {
  width: 50%;
  float: left;
}

#counter {
  width: 50%;
  float: left;
}

＆＃13;

<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>

＆＃13;

CSS - 如何在全宽div中显示一对DIV的内联？

1 个答案: