2

看到这个小提琴：http: //jsfiddle.net/LGVKm/1/

出于语义和 SEO 原因（并且因为我更喜欢它），我想在文档流中的内容之后放置搁置元素。但我希望旁边从文本向左浮动，在顶部。有什么方法可以使用 css 实现这一点？尝试了很多。

我总是可以在文本 div 之前将其放在一边，但这会将其放在重要内容之前。我不想要。或者我应该放弃我的骄傲，走简单的路线。这对搜索引擎有影响吗？我想aside元素的优先级较低......坚果不知道蜘蛛是如何感知html5的......

还有一个语义方面的问题：我怀疑是否使用文章标签作为内容，但我不确定。它不像它会被分发。可以替换文章的部分，但部分在我看来更有意义。

4

5 回答 5

1

有一个 CSS3 解决方案可能会对您有所帮助。为此，您可以使用灵活的属性。

.parent{
    display: -moz-box;
    display: -webkit-box;
    display: box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    -moz-box-direction: reverse;
    -webkit-box-direction: reverse;
    box-direction: reverse;
}
.parent div { 
    border: 1px solid blue;
    -moz-box-flex: 2;
    -webkit-box-flex: 2;
    box-flex: 2;
}
aside {
    width: 4em; 
    border: 1px solid red;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}

检查这个http://jsfiddle.net/LGVKm/26/

阅读此https://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

于 2012-09-06T09:47:10.520 回答
0

尝试添加类似：

float:right; width: 70%

到div元素。

于 2012-09-06T09:17:47.230 回答
0

http://jsfiddle.net/LGVKm/10/试试这个。你会得到你的解决方案

于 2012-09-06T09:29:44.343 回答
0

只要您定义它们的宽度并拥有一个具有定义宽度的容器，就可以向左/向右浮动元素。我改变了你的jsfiddle以反映我的意思。

于 2012-09-06T10:10:46.877 回答
0

布局

根据整体结构（如导航或网页标题），您可以使用绝对定位。我认为它可能在这里工作（relative;对于容器，absolute对于其中一列和margin另一列）。

该float:right;方法也可以。如果您不喜欢调整大小的行为，您可以查看 CSS Media Queries，以便在视口更改时调整布局。

article还是section？

还有一个语义方面的问题：我怀疑是否使用文章标签作为内容，但我不确定。它不像它会被分发。可以替换文章的部分，但部分在我看来更有意义。

article如果该内容（在“我们的工作”范围内）是一个连贯的文本，可以单独阅读，那将是正确的选择。

它是否要分发并不重要，重要的是它是否可以典型地分发而不会失去其意义。

如果它是页面上唯一的内容（= 主要内容），article大多数情况下将是正确的选择。仅当顶层没有其他分段元素（如navor ）时，才不应使用单独的，而应直接使用。asidearticlebody

其他一些注意事项：

您可以（并且我认为您应该）将两个“Sub”块包含在显式section元素中

你可以（我认为你应该）给出aside一个明确的标题。如果设计中不需要它，请将其隐藏（以便屏幕阅读器仍能阅读）。

仅在与定义figure匹配时使用。不要将它用于需要带有标题的图像的所有情况。

目前，您与（或者，如果您愿意）aside“相关” 。这是故意的吗？否则，您应该将其添加为后代（因此它将与整个网页“相关”）。sectionarticlebody

于 2012-09-07T11:15:53.273 回答