我正在尝试创建一个像这样的简单布局
http://www.ttmt.org.uk/forum/col-1.html
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="css/master.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
*{
margin:0;
padding:0;
}
html, body{
background:#eee;
height:100%;
}
h1{
font-family:sans-serif;
color:#ddd;
}
#wrapper{
min-height:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
overflow:auto;
border-left:30px solid #eee;
border-right:30px solid #eee;
padding:20px 20px 0 20px;
}
#leftCol{
background:yellow;
height:200px;
width:280px;
float:left;
}
#rightCol{
background:red;
height:200px;
margin-left:320px;
}
@media only screen and (max-width:700px){
#leftCol{
float:none;
}
#rightCol{
float:none;
margin:20px 0 0 0;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftCol">
<h1>Left Col</h1>
</div><!-- #leftCol -->
<div id="rightCol">
<h1>Right Col</h1>
</div><!-- #rightCol -->
</div><!-- #wrapper -->
<!--jQuery -->
</body>
</html>
固定宽度左列和流体右列
当调整窗口大小时，我希望左侧col落在右侧col下方 - 在此示例中它不会
我知道这是因为代码顺序。
如果我在窗口调整大小时将左侧col放在右侧col下方，它会按照我的意愿下降到下方。
http://www.ttmt.org.uk/forum/col-2.html
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="css/master.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
*{
margin:0;
padding:0;
}
html, body{
background:#eee;
height:100%;
}
h1{
font-family:sans-serif;
color:#ddd;
}
#wrapper{
min-height:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
overflow:auto;
border-left:30px solid #eee;
border-right:30px solid #eee;
padding:20px 20px 0 20px;
}
#leftCol{
background:yellow;
height:200px;
width:280px;
float:left;
}
#rightCol{
background:red;
height:200px;
float:right;
}
@media only screen and (max-width:700px){
#leftCol{
float:none;
}
#rightCol{
float:none;
margin:0 0 20px 0;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="rightCol">
<h1>Right Col</h1>
</div>
<div id="leftCol">
<h1>Left Col</h1>
</div>
</div><!-- #wrapper -->
</body>
</html>
我现在的问题是如何进行正确的col拉伸以填补空间。
我知道我可以用这样的负边距来做到这一点
http://www.ttmt.org.uk/forum/col-3.html
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="css/master.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
*{
margin:0;
padding:0;
}
html, body{
background:#eee;
height:100%;
}
h1{
font-family:sans-serif;
color:#ddd;
}
#wrapper{
min-height:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
overflow:auto;
border-left:30px solid #eee;
border-right:30px solid #eee;
padding:20px 20px 0 20px;
}
#leftCol{
background:yellow;
height:200px;
width:280px;
float:left;
}
#rightCol{
background:red;
height:200px;
width:100%;
margin-left:-290px;
float:right;
}
#rightCol-inner{
margin-left:290px;
}
@media only screen and (max-width:700px){
#leftCol{
float:none;
}
#rightCol{
float:none;
margin:0 0 20px 0;
}
#rightCol-inner{
margin-left:0;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="rightCol">
<div id="rightCol-inner">
<h1>Right Col</h1>
</div><!-- #rightCol-inner -->
</div>
<div id="leftCol">
<h1>Left Col</h1>
</div>
</div>
</body>
</html>
负边距是否是唯一的方式 - 它会为我的代码添加大量的div
答案 0 :(得分：0)
很难用你列出的所有例子来理解你想要的东西，但是......
以这种方式命令你的div：
<div id="wrapper">
<div id="leftCol">
<h1>Left Col</h1>
</div>
<div id="rightCol">
<h1>Right Col</h1>
</div>
</div>
放一个溢出：隐藏在#wrapper：
中#wrapper{
min-height:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
overflow:hiddeen;
border-left:30px solid #eee;
border-right:30px solid #eee;
padding:20px 20px 0 20px;
}
向左浮动两列，为右列提供最大宽度：
#leftCol{
background:yellow;
height:200px;
width:280px;
float:left;
}
#rightCol{
background:red;
height:200px;
max-width:500px;
float:left;
}
如果你想看到正确的列拉伸，你需要在其中加入一些内容（例如 - lorum ipsum）。