0

我想在左边浮动一个侧边栏，在右边浮动一个幻灯片（可能是一个 div、li 等），下面有两列博客文章（左图，其中数字代表标记的顺序对于帖子出现在源中）。有时幻灯片不会出现，帖子需要向上移动以取代它的位置（右图在这里）。

我尝试过类似的事情：

div#sidebar {
float:left;
width:240px;
}

div#right_column {
margin-left: 260px;
}

div#right_column div#slideshow {
width:640px;
height:360px;
}

div#right_column ol#posts li.post.odd {
float:left;
clear:left;
}

div#right_column ol#posts li.post.even {
margin-left:320px;
}

<div id="container">
<div id="header"></div>

<div id="sidebar"></div>

<div id="right_column">
    <div id="slideshow"></div>

    <ol id="posts">
        <li class="post odd"></li>
        <li class="post even"></li>
        <li class="post odd"></li>
        <li class="post even"></li>
        <li class="post odd"></li>
    </ol>
</div>

<div id="footer"></div>
</div>

但随后帖子清除了侧边栏（将它们向下移动到侧边栏下方，而不是在它旁边。

我还尝试做类似的事情：

div#sidebar {
float:left;
width:240px;
}

div#slideshow {
width:640px;
height:360px;
margin-left:260px;
}

ol#posts li.post.odd {
margin-left:260px;
}

ol#posts li.post.even {
float:right;
}

<div id="container">
<div id="header"></div>

<div id="sidebar"></div>

<div id="slideshow"></div>

<ol id="posts">
    <li class="post odd"></li>
    <li class="post even"></li>
    <li class="post odd"></li>
    <li class="post even"></li>
    <li class="post odd"></li>
</ol>

<div id="footer"></div>
</div>

但随后右栏中的第一个帖子被推到左栏中的第一个帖子下方。

这个问题与我想要的非常相似，但他们试图浮动三列可变高度的帖子，而我只需要两列。我认为必须有一个纯 CSS 解决方案，因为我非常接近。

感谢您提供的任何帮助:)。

4

1 回答 1

0

你的代码很适合幻灯片。您的问题来自ol您的帖子仅使用 1 的事实。

您在右栏中的帖子被推到下方，因为它在您在左栏中的第一个帖子之后（并且浮动右侧会将您的第二个帖子与您的第一个帖子放在同一级别，前提是您将它​​放在 HTML 代码之前）。您可以尝试将“奇数”li放在左侧浮动中。

但这会导致一些奇怪的行为，因为您的帖子有不同的高度。例子：

在此处输入图像描述

这里最好的解决方案是使用两列：

  • 一个用于“奇怪”的帖子
  • 一个用于“偶数”职位

您的布局类似于一个Pinterest：可变高度和多列。他们通过使用绝对位置来实现这一点，但很难维护，所以我会选择两列。

于 2013-02-03T18:34:46.983 回答