Question

我目前正在自定义WordPress主题并需要将侧边栏元素放在主要内容区域中，以便页面文本将环绕侧边栏，而不是将内容和侧边栏放在布局中的单独列中。布局需要以这种方式工作，因为页面文本至少有三个屏幕高，而侧边栏大约是屏幕高度的四分之一，如果我有自己的侧边栏，将浪费大量的屏幕空间列，因为它相对较宽（整体布局宽度的35％），即使它不是那么高。

每个页面都包含一个标有h1标签的主标题，后面紧跟一个带有h2标签的副标题。如果我依赖于h1和h2标签的默认“display：block”属性，那么标题将被推到侧边栏下方（因为假设宽度为100％？）但是如果我使用“display：inline”属性那么主标题和副标题将出现在同一行，而不是按预期显示在主标题下方的副标题。然后将文本格式化为h2标记之后的段落，并按预期显示在字幕下方。

WordPress输出的HTML代码如下; CSS目前仅限于“display：inline”：

<div class="entry-content">

<div id="secondary" class="widget-area" role="complementary">

    <aside id="text-2" class="widget widget_text">

        <div class="textwidget">
            Sidebar content goes here.
        </div>

    </aside>

</div><!-- #secondary -->

<h1 class="entry-title">Solutions</h1>

<h2>Products</h2>

<p>Main content goes here.</p>

<h2>Services</h2>

<p>Main content goes here.</p>

</div><!-- .entry-content -->

我想找到一个不需要将h1和h2标签分成他们自己的浮动div的解决方案，因为我不想让网站所有者在之后编辑页面或者有一个他们需要创建新页面的问题。

提前致谢！

Answer 1

这不是你需要的全部吗？

.widget-area{
  float:left;
  ...
}

http://jsfiddle.net/willemvb/u7dRq/

CSS - 如何在浮动的div周围包装<h1>和</h1> <h2>标签</h2>

1 个答案: