私のイメージは今のところ私のを右に押していますか？

Facebookの投稿のデザインと構造を再現しようとしています。ここで私のイメージは今のところ私のを右に押していますか？

body { 
 
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
 
} 
 
a { 
 
    color: #365899; 
 
    cursor: pointer; 
 
    text-decoration: none; 
 
} 
 
.post td { 
 
    vertical-align: top; 
 
} 
 
.timestamp { 
 
    font-size: 13px; 
 
    color: #999; 
 
}

<div class="post"> 
 
    <table> 
 
     <tbody> 
 
      <tr> 
 
       <td> 
 
        <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF"> 
 
       </td> 
 
       <td> 
 
        <table> 
 
         <tr> 
 
          <td> 
 
           <strong><a>Toomblr</a></strong> 
 
          </td> 
 
         </tr> 
 
         <tr class="timestamp"> 
 
          <td> 
 
           20/01/2017 - 11:43 
 
          </td> 
 
         </tr> 
 
        </table> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        Some content. 
 
       </td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

私が持っているもののJSFiddleです：https://jsfiddle.net/6nodfbdj/

あなたが見ることができるように、画像のみが50×50であるが、それはのためにそのようにすべての方法をtdを押し出しています理由はありません。

どういうわけかコンテンツを含むtdと競合しています。基本的に何が起こっているのかは、コンテンツの幅が何であってもtdであり、画像が入っているtdにも設定されています。

アイデア？

出典

2017-01-20 ThePerplexedOne

期待する出力は何ですか？列内の各セルの幅は、列が必要とする最大幅まで伸びます（特に指定しない限り）。 –

すべてのn番目の 'td'は、常にグループ内の最大の' td'の幅をとります。イメージを持つ 'td'はテキスト' Some content'と同じ位置にあるので、その 'td'を使って取得します –

レイアウトのためにテーブルを使用しないでください - 表データのテーブルを使用してください – j08691

コメントの1つで説明したように、表は書式設定に使用しないでください。それらは表形式のデータ用です。

非ビジュアルメディアにレンダリングするときに、このようなレイアウトの文書の内容に手段が問題を提示することができるようw3.orgサイトから

の表は、純粋に使用すべきではありません。さらに、グラフィックスと共に使用すると、これらのテーブルによって、ユーザが水平方向にスクロールして、より大きなディスプレイを備えたシステム上で設計されたテーブルを表示することが強制されることがあります。これらの問題を最小限に抑えるために、作者はスタイルシートを使用して表ではなくレイアウトを制御する必要があります。

注。この仕様は、代わりにあなたはCSSを使用する必要があります https://www.w3.org/TR/html401/appendix/notes.html#notes-tables

上の節の表についてのより詳細な情報が含まれています。レイアウトとサイズはあなたのフィドルとまったく同じではありませんが、どうぞご覧くださいhttps://jsfiddle.net/ringhidb/jeeu2yrt/

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <style type="text/css"> 
     body { 
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
      font-size: 16px; 
     } 

a { 
    color: #365899; 
    cursor: pointer; 
    text-decoration: none; 
} 

.post { 
    position: absolute; 
} 

.header {} 

.logo { 
    float: left; 
    padding: .1em; 
} 

.info { 
    float: left; 
    padding: .25em; 
} 

.site { 
    font-size: 1.02em; 
    font-weight: bold; 
} 

.timestamp { 
    font-size: .75em; 
    color: #999; 
} 

.content { 
    clear: both; 
} 

    </style> 

<title>CSS Layout</title> 

</head> 

<body> 
    <div class="post"> 
    <div class="header"> 
     <div class="logo"> 
     <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF"> 
     </div> 
     <div class="info"> 
     <a class="site">Toomblr</a> 

     <div class="timestamp">20/01/2017 - 11:43</div> 
     </div> 
    </div> 

    <div class="content"> 
     Some content. 
    </div> 
    </div> 
</body> 

</html>

出典

2017-01-20 15:24:56

あなたがしたいことはわかりませんが、これを試してみてください。

.post td { 
    vertical-align:top; 
    float:left; 
}

出典

2017-01-20 14:47:59

OPが何を望んでいるのかわからない場合は、なぜ彼にこれを試すように提案していますか？ –

これは動作します。ありがとう。 – ThePerplexedOne

「一部のコンテンツ」を含む<td>のテキストの幅によって設定されています。試してみてください：

<td colspan=2> 
    Some content. 
</td>

出典

2017-01-20 14:49:31 splrs

それを試してみてください。それは、コンテンツtdの幅を設定することに終わります。 – ThePerplexedOne

編集した方が便利です。 – splrs

rowspanとcolspanで修正できるものは "予備のセル"でした。試してみてください：

<body> 
<div class="post"> 
    <table> 
     <tbody> 
      <tr> 
       <td rowspan=2> 
        <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF"> 
       </td> 
       <td> 
       <strong><a>Toomblr</a></strong> 
       </td> 
       </tr> 
         <tr class="timestamp"> 
          <td> 
           20/01/2017 - 11:43 
          </td></tr> 
      <tr> 
       <td colspan=2> 
        Some content. 
       </td> 
      </tr> 
     </tbody> 
    </table> 
    </div> 
</body>

出典

2017-01-20 14:52:48 Feralheart

もう少し小さなコメントです。

を使用すると、 "スペアセル"を簡単にデバッグできます。 – Feralheart

画像の幅を100％試しましたか？

出典

2017-01-20 15:16:52

私のイメージは今のところ私の​​を右に押していますか？

答えて

関連する問題

私のイメージは今のところ私のを右に押していますか？