0

我使用了 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）。

如果不可能，请指导我制作两列作为链接​​？换句话说，两列的内容应该被一个链接包裹——锚元素）。

可能吗？

4

5 回答 5

3

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

于 2013-06-25T11:04:33.300 回答
2

如果您使用 HTML5 文档类型，则可以使用内联元素包装块级元素，例如

<a href="">
    <div>

    </div>
<a>
于 2013-06-25T11:02:39.597 回答
0

在这里，您有一个可行的解决方案：如果您自己尝试. 但是，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;
}
于 2013-06-25T11:09:36.997 回答
0

我希望这是你想要的..

  <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>
于 2013-06-25T11:17:20.593 回答
0

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

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

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

.columns {
  display: table;
}
.leftNav {
   display: table-cell;
   width: 200px;
}
.rightPara {
   display: table-cell;
}
于 2018-08-01T08:14:21.083 回答