Question

我正在尝试制作一个如下所示的布局：

------------------------------
|    _|_________________|_    |
|   |content, content,    |   |
|---|  content, content,  |---|
|   |    content, content,|   |
|   |  content, content,  |   |
|   |content, content,    |   |
|   |  content, content,  |   |
|   |    content, content,|   |
|---|  .................  |---|
|   |_____________________|   |
|     |                 |     |
-------------------------------

到目前为止，这是我设法提出的......

保证金顶部和底部不是我想要的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html, body { height:100% }
#content { width:80%; min-width:600px; margin:0 auto; margin-top:10%; margin-bottom:10%; background:#CCCCCC; overflow:auto }
</style>
</head>

<body>

<div id='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, 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, 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, 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, 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, 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, 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, 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, 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, content, content, content, content, content, content, content, content, content, content, content, content, content, 
</div>

</body>
</html>

Answer 1

为什么你不能以像素为单位尝试边距？

margin:10px

或

margin:10px 11px 12px 13px;

右上角相应左下方

Answer 2

我已将您的代码添加到JSFiddle：

http://jsfiddle.net/Mutant_Tractor/RpWpN/1/

我添加height:80%;这似乎可以实现您的目标。

Answer 3

我在这里做了一些有根据的猜测：

我看到height: 100%，您显然想要横向居中<div id='content'>。
因此，该图片是整个窗口，您希望在调整窗口大小时进行缩放。
我也看到min-width: 600px，所以你希望它有一个最小宽度（和高度？）。
overflow: auto - 您要么准备清除花车，要么在内容太长时尝试滚动。
我不确定这四个盒子应该做什么。

Live Demo（edit）

使用css修复我的布局以获得正确的边距

3 个答案: