html - 如何在 CSS 中使用 SPAN 创建列？

Question

我使用了 CSS2:

.leftNav {
width:200px;
float:left;
display:inline-block;
}

.rightPara{
margin-left:210px;
}

在 HTML 中:

    <div>

    <a href="web.com">

    <span class="leftNav">
    <img src="bla.gif" width="40" height="40" />
    </span>

    <span class="rightPara">
    <h2>header<h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet tortor tristique, tempus nunc quis, ornare mauris. Mauris in interdum lectus. Integer nulla ante, ultrices non vulputate vel, tincidunt in urna. Donec et congue mauris, non placerat nisl. Integer volutpat auctor erat, aliquet aliquam velit sagittis nec. Quisque pharetra aliquam tincidunt. Etiam id diam lobortis, porta nunc nec, accumsan tortor. Duis in nisi vitae eros bibendum dignissim. Sed commodo massa egestas placerat pellentesque.</p>
<p>In facilisis congue purus eget tempus. Integer a vestibulum tellus. In at orci malesuada, egestas neque quis, cursus risus. Etiam iaculis, velit id fringilla fermentum, leo nibh bibendum orci, eu facilisis risus mi ac risus. Nullam eu odio feugiat, venenatis orci vel, commodo quam. Integer in fringilla leo. Sed placerat varius facilisis. Maecenas vitae libero neque.</p>
    </span>

    </a>

    </div>

但是没有用!段落被左栏弄乱了。

例如，它应该是这样的:

// ---------------------------
// | ..... | ............... |
// | ..... | ............... |
// | ..... | ............... |
// | ..... | ............... |
// | ..... | ............... |
// ---------------------------

为什么我需要 SPAN 是，我想用 A ( anchor )元素包装它们。 (DIV 不会被内联元素包裹，例如 Anchor)。

如果不行，指导我制作两个栏目作为链接？换句话说，两列的内容应该由链接 - anchor 元素包裹)。

这可能吗？

Answer 1

span 只占用呈现内容所需的空间。这适用于所有内联元素。它可以在 CSS (display:block;) 中修改，但最好使用 div 就像 Marc Lloyd 建议的那样并让它们 float:left;