2

これは私のページがどのように見えるべきかです -

--------Header (will put code to load header from external site here)
--Image on left side - Text on right side.
--------Footer ((will put code to load footer from external site here))

これどうやってするの？私は実際に、画像、テキスト、ヘッダー、フッター コードを配置するだけでよいテンプレートを探しています。

4

4 に答える 4

6

オプション1：

画像を囲むテキストには、次の基本的な HTML を使用します。

<div id="header">
  ... contents go here ...
</div>

<div id="content">
  <img src="sample.jpg" alt="" />
  <p>Example content</p>
</div>

<div id="footer">
  ... contents go here ...
</div>

そしてこのCSS：

#content img {
  float: left;
}

オプション 2:

2 つの異なるコンテンツ列には、次の HTML を使用します。

<div id="header">
  ... contents go here ...
</div>

<div id="content">
  <div class="col">
    <img src="sample.jpg" alt="" />
  </div>
  <div class="col">
    <p>Example content</p>
  </div>
</div>

<div id="footer">
  ... contents go here ...
</div>

そしてCSS：

#content .col {
  float: left;
}

#footer {
  clear: left;
}
于 2012-11-20T01:41:19.293 に答える
0

または、レスポンシブ レイアウトhttp://jsfiddle.net/PSBtr/12/ Iframe を埋め込みページとして使用できます。

iframe

マークアップとしての採用グリッド。

于 2012-11-20T02:04:37.563 に答える
0

次のようなテーブルを使用できます。

<table style="width:100%">
<tr> 
    <td colspan="2">
    HEADER HERE
    </td>
</tr>
<tr>
    <td style="width: 70%">IMAGE</td> <-Change these to respective widths
    <td style="width: 30%">TEXT</td>
</tr>
<tr> 
    <td colspan="2">
    FOOTER HERE
    </td>
</tr>

</table>
于 2012-11-20T01:22:20.650 に答える
0

テーブルを使用しないでください。このフィドルを見てくださいhttp://jsfiddle.net/2sWrF/1/

css を使用して画像とテキストをフロートさせ、並べて表示します

cssは.cfclearfix であり、フッターが横にあるのではなく、画像とテキストを含む div の下に移動するようにします。

于 2012-11-20T01:33:14.283 に答える