1

非常に簡単で厳格なレイアウトの静的 Web ページをデザインしたいと考えています。divとcssでこれを実現したい。

これがどのように見えるかのアイデアです：

image HEADING                          -> .... Content continues here 
      teasertext tesertext             Content Content Content Content 
                                       Content Content Content Content 
      Content starts here ... Content  Content Content Content Content 
      Content Content Content Content  Content Content Content Content 
      Content Content Content .....->  Content Content Content Content 

      -----------------    -----------------
      |Large Image 1  |    | Large Image 2 |          Imagedescription
      |               |    |               |          Imagedescription
      |               |    |               |          Imagedescription
      -----------------    -----------------
      image copyright

基本的な考え方は、左側に小さな画像 (赤い四角) を配置することです。ページの残りの部分は、画像の右側に配置されます。最初に見出しがあり、その後にティーザー テキストが続きます。

コンテンツ領域は固定サイズで、テキストは右側の領域にオーバーフローする必要があります (大きい場合)。

その後、右側に説明があり、下に著作権がある 2 つの画像があります。

私はこれまで css / div で何もしたことがありません。私にとって最大の問題は、コンテンツ領域をオーバーフローとして定義する方法です。私はしばらくこれをいじっていましたが、これを行う方法がわかりません。

これが経験豊富な Web 開発者にとって簡単な作業であり、ヒントを教えてくれることを願っています。

これは私がこれまでに持っているものです:

CSS:

*.left_area {
    padding:10px;
    text-align:left;
    width:40px; 
    float:left; 
} 

*.right_area {
    padding:10px;
    text-align:left;
    width:90%; 
    float:left; 
} 

*.heading {
    font-family:Tahoma,Arial,Verdana,sans-serif;
    font-size:16px;
    font-weight:bold;
    margin-bottom:10px;
}

*.teaser {
    font-family:Tahoma,Arial,Verdana,sans-serif;
    font-size:12px;
    font-style:italic;
    margin-bottom:10px;
}

*.content {
    width:50%;
    height:20px;
    float:left;
}

html:

<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css">
</head>
<body>
<div class="left_area">
    <img src="square.png"  width="16" height="16" />
</div>
<div class="right_area">

    <div class="heading">
    Heading Heading Heading
    </div>

    <div class="teaser">
    Teaser Teaser Teaser Teaser Teaser Teaser
    </div>

    <div class="content">
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
    </div>

</div>

</body>
4

1 に答える 1

1

https://developer.mozilla.org/en/CSS/columnsを参照してください - これはdiv.content要素 (または一般的に - ページの上半分)をフォーマットするために必要なものだと思います。

あなたが提供した html が、あなたが素敵な ascii-picture に描いたものであるかどうかはわかりません。しかし、大きな画像はフォーマットが簡単なようです。それらすべてをいくつかの要素で（divおそらく）ラップして、 overflow:hidden- を付けて BFC を与えます（ http://colinaarts.com/articles/the-magic-of-overflow-hidden/でそれについて読むことができます）float: left 、またはを追加しますそれらをインラインのままにしておきます。

一般に、HTML の同様の構造をお勧めします。

<div id="textSection">
  <h1>HEADING</h1>
  <p>Teasertext...</p>
  <p>Content...</p>
</div>
<div id="imagesSection">
  <div class="image">
    <img src=".." alt="..">
    <p>Image copyright or something</p>
  </div>
  <div class="image">
    ...
  </div>
  <div class="descriptions">
    <p>Imagedescription...</p>
    ...
  </div>
</div>

に適用columnsし#textSectionます。に適用overflow:hiddenし#imageSectionます。または (代わりfloat:leftに#imageSection > *) 画像と画像の説明を表のセルのように動作させたい場合は、次のようにします。

#textSection {
     -moz-columns: 2;
  -webkit-columns: 2;
          columns: 2;
}
#imagesSection {
  display: table;/* add width, margins and so on */
}
#imagesSection > * {
  display: table-cell;/* add widths, paddings, and so on */
}

私はそのコードをテストしていないことを認めなければなりませんが、重大な間違いがなかったことを願っています:)

于 2012-06-29T11:50:31.817 に答える