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アンカーのようなインライン要素でラップされません)。

それが不可能な場合は、リンクとして 2 つの列を作成するように案内してください。つまり、2 つの列のコンテンツはリンク (アンカー要素) でラップする必要があります。

出来ますか？

4

5 に答える 5

3

spanコンテンツのレンダリングに必要なスペースのみを占有します。これは、すべてのインライン要素に当てはまります。CSS ( ) で変更できますが、Marc Lloyd が提案したようdisplay:block;に使用する方がはるかに優れています。divfloat:left;

于 2013-06-25T11:04:33.300 に答える
2

HTML5 doctype を使用する場合、ブロック レベル要素をインライン要素でラップできます。

<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 に答える