Question

有一个标记，看起来像这样，

<aside class="left">

  <p>Thing 1</p>
  <p>Thing 2</p>

</aside>


<aside class="left">

  <p>Thing 3</p>
  <p>Thing 3</p>

</aside>

需要做的事情完全相同，但它应该在一个块中，当在overlow上发生时，这些事情应该自动设置样式。

<aside class="block">

  <!--These elements should have to look like, like they're in aside.right -->
  <p>Thing 1</p>
  <p>Thing 2</p>

  <!--These elements should have to look like, like they're in aside.left -->
  <p>Thing 3</p>
  <p>Thing 4</p>

</aside>

可以通过CSS做到吗？

Answer 1

尝试：

p { float:left; width:100px; }

你可以改变＆＃39; 100px＆＃39;无论你喜欢什么。当屏幕变得越来越小时，元素将自动改变。

Answer 2

如果我理解正确，您希望前两个<p>标记浮动到容器的左侧，而后两个<p>标记浮动到右侧。如果是这种情况，技术上可以通过CSS实现。

p:first-child, p:first-child + p {
    float: right;
    clear: right;
}

p {
    float: left;
    clear: left;
}

我还没有对它进行测试，但基本上它应该做的是默认情况下浮动<p>标记，然后获取它找到的前两个实例并将它们浮动到右边。您可能必须添加一些样式以正确定位它们（例如，负边距）。或者你可以左右使用绝对定位。关键是，您可以选择带有基本CSS的前两个（这应该可以一直回到IE8）。

看看这里：http://jsfiddle.net/4k5u8/1/

这是你的意思吗？

我还想补充一点，如果你只是在<p>标签中添加一个容器类，那么定位会更容易。

Answer 3

那么问题是什么？添加一些新的块

<强> HTML

<aside id="aside">
    <div class="block">
        <p>bla bla</p>
        <p>bla bla</p>
    </div>
    <div class="block">
        <p>bla bla</p>
        <p>bla bla</p>
    </div>
</aside>

<强> CSS

#aside {
    width: 100%;
    overflow: hidden;
}
#aside .block {
    float: right;
    width: 40%;
}
#aside .block:first-child {float: left;}

处理溢出

3 个答案: