句柄溢出

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

你可以把“100px”改成你喜欢的任何东西。当屏幕变得越来越小时，元素会自动改变。

Answer 2

如果我没理解错的话，您希望前两个<p>标记浮动在容器的左侧，后两个<p>标记浮动在容器的右侧。如果是这样的话，从技术上讲可以通过CSS实现。

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

p {
    float: left;
    clear: left;
}

我还没有测试它，但基本上它应该做的是在默认情况下向左浮动<p>标记，然后获取它找到的前两个实例，并将它们向右浮动。您可能需要添加一些样式来正确定位它们(例如，负边距)。或者你可以使用绝对的左右定位。重点是，你可以用basic 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;}