个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我想设计一个布局非常简单和严格的静态网页。我想用 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/
26
4
0
我为 S3 做了一个额外的布局(所有布局的反叛)，人们说，使用 layout-sw320dp 对 s3 有好处。一切正常，s3 选择了这个文件夹，布局在 s3 上看起来很棒。 但是当我尝试在 10"平
我是 CSS 的新手，我正在尝试创建一个 3 列布局。也应该有一个居中的页脚。页面的总高度应该填满当前的屏幕。宽度似乎不对。 目前，页脚在尺寸和位置上似乎都没有对齐。 I have attached
已关闭。这个问题是 off-topic 。目前不接受答案。 想要改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。 已关闭10 年前。 Improve th
有没有办法确定设备是从右到左的语言(比如阿拉伯语)而不是从左到右的语言(英语)？ 需要与旧 API 级别(低至 10)兼容的东西 解决方案 我最终在接受的答案中使用了 xml 方法。更进一步，我还添加
我是 QT 的新手。我试图通过实现下面看到的这个小窗口来理解布局机制。它在作为主窗口的 QWidget 下具有以下元素: 一个延伸到所有客户区域的大型 QWidget。 窗口顶部的两个 QWidget
Accordion 布局是堆叠面板布局，因为此时只有一个面板可见，但我想同时显示两个面板可见，所以我们可以使用 Accordion 面板来做到这一点吗？？ 最佳答案 您不能扩展现有的 Accordio
我只是想知道，作为一个假设示例，针对以下场景布局表格的最佳方式是什么: 假设我正在编写一个用于跟踪学生出勤的应用程序。每年年初，我都想添加所有学生(我将手动执行此操作 - 现在，是否应该为这里的每个学
在 CVS 中，我们的项目中有多个目录。 有一个夜间构建，它必须从同一个 CVS 项目的不同目录中提取东西才能构建夜间构建。所以我应该记住这一点，如果我们迁移到 SVN，我必须修改构建脚本以从不同的存
我在 WPF Windows 上有几个列表框，带有 Height="Auto" Width="Auto"在表格上设置 表单大小在不同分辨率下完美匹配，但问题是当我按下最大化按钮时，在表单调整大小时会看
仅供引用，我是 WPF 的新手。 我正在我的 WPF 应用程序中创建一个侧边栏并想要圆角。我学到的不是可以附加到网格的属性。另外，我尝试将文本块放在边框控件中，但我收到的错误消息说“ child 只能
我是CodeIgniter的新手。我想使用包含菜单，页脚等的基本样式创建母版页或布局。我不想在所有页面中编写重复的内容并为所有页面自动加载。例如，我可以在asp.net中创建母版页，或者在asp.ne
我正在使用它来调试应用程序。调试的时候发现底部显示了一个窗口中变量的值，如图- 但是，当我显示表达式时，我得到这样的布局 - 我的问题是，是否可以更改变量窗口的布局也可以在右侧显示值，因为这对我来说很
上面的代码中，放置“as=”footer_links”是什么意思？ 最佳答案 as="x" 语法定义模板可用来调用 block 的名称。因此，对于以下内容: 在outer_block.p
我试图编写一个检查注册表值的功能，以查看Windows上的控制台是否启用了颜色。 Computer\HKEY_CURRENT_USER\Console\VirtualTerminalLevel 如果您
我有一个布局，但无法提前定义其所有区域，因为它们是未知的。 稍后创建了 ItemView，我想使用 View 的 ID 作为区域名称在布局中创建一个新区域，这样我就可以说: layout.dynami
我们有一个相当复杂的 gulp 构建过程，涉及多个模块，每个模块都有一个或两个 watch 。我想在一个仪表板中监控这一点，如下所示: 每一列都是一个模块，列内的每一行都是后续的构建步骤。一旦第 1
这就是问题所在，我有一个 MainWindow 类，它在一个设置例程中扩展了 JFrame，我将该类的布局设置为新的 CardLayout()。这一切都工作正常，但是当我从 JFrame 请求布局并将
我正在制作一个简单的迷宫程序，用户可以在其中创建墙壁、路径、起点和终点，单击“解决”，迷宫将被解决。为此，我有一个大小为 640x480 的 java JFrame。在 JFrame 的左侧，我有一个
我正在使用它来调试应用程序。调试的时候发现底部显示了一个窗口中变量的值，如图- 但是，当我显示表达式时，我得到这样的布局 - 我的问题是，是否可以更改变量窗口的布局也可以在右侧显示值，因为这对我来说很
我已经编写了使用 VBox 作为布局的代码。我希望按钮出现在顶行，然后绘制 2 条水平线，在 400x400 场景中应位于 y=200 和 300 处。但输出显示了我给出的不同坐标处的线条。 我知道这
我是一名优秀的程序员,十分优秀！