Question

我想设计一个非常简单严格的静态网页。我想用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的事情，对我来说最大的问题是如何将内容区域定义为溢出。我已经搞乱了一段时间，并且无法弄清楚如何做到这一点。

我希望对于经验丰富的网络开发人员来说这是一项简单的任务，他可以给我一些提示。

这是我到目前为止所做的：

的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>

Answer 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 */
}

我必须承认我没有测试过该代码，但我希望我没有犯过严重的错误：）

如何用div和css实现这种布局？

1 个答案: