0

さて、私のテーブルセルには、左側に画像があり、上に配置したいリンクがあり、その下に簡単な説明があります。

今、私は左側の画像とリンク上部を揃えています。私の問題は、リンクテキストが画像の右側に留まり、セルの幅で切り取られるのではなく、画像の下に引き継がれていることです。

これがリンクのCSSです。幅を設定しても何も起こりません。表示をブロックするように設定しようとしましたが、画像の下にリンクが表示されます。私はhtmlに非常に慣れていないので、無知で裸です。

.jobLink {
    color:black;
    vertical-align:top;
    width:100px;
}

編集1：

あなたの提案のすべてに感謝します。今夜これを試してみるつもりです。また、本当にテーブルが必要かどうかを再確認していただきありがとうございます。考えれば考えるほど、各リスト項目を設定する方法のテーブルは本当に必要ありません。リストを使用する方が理にかなっています。

編集2：

さて、これが私が目指している外観です。

ここに画像の説明を入力してください

みんなのアドバイスでテーブルからリストに切り替えました。データは実際には表形式ではありません。

編集3

これが私がリストで使用している更新されたcssです。

.jobList {
    background: white;
    color:black;
    width:inherit;
    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    font-size:10pt;
    font-weight:bold;
    list-style:none;
    float:left;
    padding:0;
    margin:0;
}

.jobList li 
{
    float:left;    
    overflow:hidden;
    width:inherit;
}

.jobList li a
{
    color:Black;
    vertical-align:top;
    white-space:nowrap;
}

.jobList li img
{
    float:left;    
}

編集4

これが画像で、これが問題のリストアイテムです。また、リスト自体にラッパーdivがあり、これがおそらく重要です。そのcssを追加しました。

ここに画像の説明を入力してください

.jobsListWrapper {
    width:318px;
    height:500px;
    overflow:auto;
    float:left;
}

<li>
<div>
<img src="/images/page.png">
<a id="5182" href="/jobs.aspx?rid=1016&amp;jid=5182">MyJobID - This is my long title for the task that I need to complete</a>
</div>
</li>

編集5

私はそれを見ただけです。ラッパーがリストアイテムを自動的にオーバーフローさせています...わかりました。垂直方向にのみオーバーフローするにはどうすればよいですか？いいえ、それは問題ではありませんでした。

4

3 に答える 3

0

追加してみてください：

position:relative;
display:block;
overflow:hidden;

<ul>cssへ

と

postion:absolute;

<li>cssに。

これは、<ul>が絶対的に配置されている場合、ドキュメントのフローから削除されるためです。つまり、ビューポートに対して位置が設定され、のが<li>無視されます。overflow:hidden<ul>

于 2012-08-01T16:42:22.557 に答える
0

試してみるのは、各要素をDIVでラップし、floatを使用することです。インラインCSSを失礼します。

<td style="width: 15%">
    <div style="float: Left">
        <img alt="" src="Image.png" />
        <a href="" class="jobLink">Hello!</a>
    </div>
    <div style="float: Right">
        <p>Hey This is something.</p>
    </div>
</td>

次に、テーブルセルの幅を使用してそれらを互いに近づけることができます

<td style="width: 15%">

それが役に立ったら教えてください！

于 2012-08-01T16:39:17.893 に答える
0

これが本当に表形式のコンテンツでない限り、テーブルを使用することはお勧めしませんが、次のソリューションは、テーブルセルを含むすべてのコンテナ要素で機能するはずです。

画像で「float：left」のcssルールを使用すると、画像は明らかにコンテナの左側に浮かびます。これにより、画像がその下にコンテンツをプッシュするのを停止し、コンテンツが画像をラップするだけになります。

この場合、それは画像がそれ自体を左側に配置し、リンクと説明テキストがそのすぐ隣、右側に配置されることを意味します。

テーブルセル内のHTMLは、次の行に沿ったものであると想定しています。

<img src="http://www.heliam.net/Gein/_Media/apple_icon.png">
<a href="#">Here is a link</a>
<p>And here is some descriptive text</p>

その場合、CSSは、画像が左にフロートしていることを確認する必要があります。

img {
  float: left;
}

これらすべての動作をここで確認できます：http：//jsfiddle.net/aySEe/

于 2012-08-01T16:44:13.533 に答える