1

我想设计一个布局非常简单和严格的静态网页。我想用 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

基本思想是在左侧有一个小图像（红色方块）。页面的其余部分与图像右对齐。首先是标题，然后是预告文本。

内容区域应为固定大小，文本应溢出到右侧区域（如果更大）

之后，我有两张图片，右边有描述，下面有版权。

我以前从未对 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 图片中绘制的那个。但是大图像似乎很容易格式化。只需将它们全部包装在某个元素中（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 回答