我想设计一个布局非常简单和严格的静态网页。 我想用 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
基本思想是在左边有一个小图像(红色方 block )。 页面的其余部分与图像右对齐。 首先是标题，然后是预告文本。
内容区域应该是固定大小，文本应该溢出到右边的区域(如果更大的话)
之后我有两张图片，右边是描述，下面是版权。
我以前从未用 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>
最佳答案
请参阅https://developer.mozilla.org/en/CSS/columns - 我相信这就是您需要格式化 div.content 元素(或通常 - 页面的上半部分)。
我不确定您提供的 html 是否真的是您在漂亮的 ascii 图片中绘制的那个。但是大图像似乎很容易格式化。只需用 overflow:hidden 将它们全部包装在某个元素(可能是 div)中 - 给它一个 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>
将列应用于#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 */
}
我必须承认我没有测试过那段代码，但我希望我没有犯严重的错误:)
关于css - 如何用div和css实现这种布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11260096/