0

http://weknowwhatyouredoing.com/

左にプロフィール画像、太字のタイトル/名前と太字のタイトル/名前の下にテキスト、その下に日付/時刻スタンプがあるこのようなテーブルを作成しようとしています...基本的にはそのウェブサイト (http://weknowwhatyouredoing.com/) またはそれ以上 (または Twitter のツイート) で。

これを達成する方法についてのチュートリアルを知っている人はいますか? 現在、複数の列を持つテーブルを使用していますが、1 つのセルが大きいと、その行のすべてのセルが同じ高さになり、それが気に入らないようです。Android ではこれはリスト ビューと呼ばれますが、html/css の世界でそれが何であるかわかりません。何か助けてください。前もって感謝します

4

5 に答える 5

2

複数のテーブルを並べてフローティングにすることができます。あなたが表示するウェブサイトの要素は、私が知る限り、faと一致していません。

rowspanとcolspanのチュートリアルはここにあります。

画像を3行にまたがらせると、太字のテキスト、コンテンツ、日付スタンプをそれぞれ1行にまとめることができます。valignを使用すると、行がコンテンツよりも高くなった場合に、行内に要素を垂直に配置できます。これは、3つの行を合わせて、画像を含む1つのスパン行よりも高い場合に発生する可能性があります。

于 2012-08-08T13:56:30.580 に答える
0

複数のリスト要素を使用してみませんか？テーブルは、レスポンシブデザインに柔軟性を与えるものではありません。リスト要素の複数の列を作成すると、制限付きで必要に応じて再配置できます

于 2012-08-08T14:19:27.910 に答える
0

行の高さが等しいという問題の簡単な修正として、 weknowwhatyouredoing.comで使用されているのと同じレイアウト方法を使用できます。

各列を別々の で包み、内側<div>に配置します。<table>

4 つのコンテナー、独立した行の高さを持つ 4 つのテーブル。

于 2012-08-08T13:56:50.877 に答える
0

Twitter Bootstrap CSS ライブラリを見てみましょう。Twitter Bootstrap これは、div のみを使用した純粋な HTML5/CSS です。

于 2012-08-08T14:00:48.950 に答える
0

HTML の知識を深めるために、W3C (Word Wibe Web Consortium) の仕様を参照できます。サンプルとして、このページを見ると、W3C はすべての構造、属性、Table 要素について説明しています。

Google で多くのチュートリアルを見つけることができます (「tutorial create Table HTML」を検索してください)。

また、特定の Web サイトにホバー要素を表示するブラウザー プラグインを使用して、Web サイトの構造を理解するのに役立ちます。( Firefox と Chrome では firebug、Opera ブラウザでは Dragonfly... )

于 2012-08-08T14:01:31.237 に答える