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（锚）元素包装它们。（DIV不包含内联元素，如Anchor）。

如果不可能，请指导我将两列作为链接？换句话说，两列的内容应该由link-anchor元素包装。

有可能吗？

Answer 1

span只占用他们渲染内容所需的空间。对于所有内联元素都是如此。它可以在CSS（display:block;）中进行修改，但使用div会更好，就像Marc Lloyd建议的那样float:left;

Answer 2

如果使用HTML5 doctype，则可以使用内联元素包装块级元素，例如

<a href="">
    <div>

    </div>
<a>

Answer 3

这里有一个可能的解决方案：Try if yourself。然而，DIV有更好的解决方案。

HTML：

<div id="content">
    <span class="leftNav">
       IMG
    </span>

    <span class="rightPara">
       <h2>header</h2>
       <p>something something ....</p>
    </span>
</div>

CSS：

#content {
    width: 600px;
}

.leftNav {
    width:200px;
    float:left;
    border: 1px solid;
}

.rightPara{
    margin-left:210px;
    float:left;
    border: 1px solid;
}

Answer 4

我希望这就是你想要的......

  <div>
  <span class="leftNav" style="width: 200px; display: inline-block; vertical-align: top;">
      <img src="bla.gif" />
  </span>
  <span class="rightPara" style="display: inline-block">
    <h2>header<h2>
        <p>something something ....</p>
 </span> </div>

Answer 5

只需将您的列包装在一个元素中：

<yoursite>

然后将包装器显示为表格，将每一列显示为表格单元格

<div class="columns">
  <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>
  </span>
</div>

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

5 个答案: