Question

出于语义和搜索引擎优化的原因（因为我更喜欢它）我想把我的内容放在文档流程中。但我希望旁边从文本中向左浮动，在顶部。有什么方法可以使用CSS吗？尝试了很多。

我总是可以在文本div之前放下一边，但是它会把它放在重要的内容之前。我不想要的。或者我应该吞下自己的骄傲，走简单的路线。搜索引擎是否重要？我认为旁边的元素具有较低的优先级...坚持不确定html5知道蜘蛛是如何...

另一个语义问题：我怀疑使用内容的文章标签，但我不确定。这不像它将被分发。可以替换文章部分，但在我看来部分更有意义。

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

Answer 2

尝试添加以下内容：

float:right; width: 70%

到div元素。

Answer 3

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

Answer 4

只要您定义宽度并具有定义宽度的容器，就可以左/右浮动元素。我修改了您的jsfiddle以反映我的意思。

Answer 5

布局

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

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

`article`或`section`？

另一个语义问题：我怀疑使用内容的文章标签，但我不确定。这不像它将被分发。可以替换文章部分，但在我看来部分更有意义。

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

如果分发无关紧要，只有通常可以分发而不会失去意义时才会有用。

如果它是页面上唯一的内容（=主要内容），article大部分时间都是正确的选择。只有在顶层没有其他分区元素（如nav或aside）时，您才不应使用单独的article，而是直接使用body代替。

其他一些说明：

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

你可以（而且我认为你应该）给aside一个明确的标题。如果在设计中不需要，则可视地隐藏它（以便屏幕阅读器仍然可以读取它）。

如果匹配definition，则仅使用figure。不要将它用于所有需要带图片的图像的情况。

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

在左上方浮动div而不将其放在第一行

5 个答案:

布局

`article`或`section`？

其他一些说明：

在左上方浮动div而不将其放在第一行

5 个答案:

布局

article或section？

其他一些说明：

`article`或`section`？