固定左右列，液体中间无法跨越整页

时间：2012-09-14 23:28:59

标签： css templates html dreamweaver

我正在尝试不使用adobe预定义的CSS模板，而是创建自己的模板。我有一个130px的高度标题我想跨越整个宽度。在那之下，我希望在页面的最左边和最右边有150px的固定列。中间，我想跨越浏览器的整个宽度。所有这些都包含在“容器”div中。

我的标题很好，向左浮动，宽度= 100％。接下来，左列宽= 150px并向左浮动。没问题。然后，“内容”，当我向左浮动时出现在它应该的位置。然后，150px宽的右列也向左浮动。

我将内容（中间div）宽度设置为什么？如果我做100％，它会将它放在左列下方 - 即使我在两侧设置150px的边距以容纳列。如果我做“自动”，它也会打破水平完整性。现在它是70％，这使得它们都排成一行，但不会在大分辨率下占据整个屏幕。 （我有一个最小宽度设置）。这似乎应该是一个简单的解决方法 - 我的预感是它与容器div的“绝对”定位有关。感谢您的任何想法/帮助。

以下是该页面的链接：

http://www.mynextbit.com/Fifty%20Stars%20Thirteen%20Stripes/index.html

这是我的代码：

.container {
float: left;
height: auto;
padding: 0px;
margin: 0px;
left: 0px;
top: 0px;
clip: rect(0px,auto,auto,0px);
position: absolute;
width: auto;
min-width: 1024px;
}
.header {

}
.leftcol {
width: 150px;
float: left;
text-align: center;
}
.content {
height: auto;
float: left;
text-indent: 10px;
overflow: scroll;
width: 70%;
min-width: 700px;
}
.rightcol {
float: left;
width: 150px;
clear: none;
}

1 个答案:

答案 0 :(得分：6)

更改div的顺序。

<div class="leftcol"></div>
<div class="rightcol"></div>
<div class="content"></div>

然后在CSS中将右侧col更改为

.rightcol { float: right; }

从内容div中删除float: left;和width: 70%;（没有浮动，没有宽度）

这是一个小提琴：jsfiddle.net/D4fPh/

2014年9月17日 - 使用可执行代码段进行更新：

@charset "utf-8";
/* CSS Document */

.container {
    float: left;
    height: auto;
    padding: 0px;
    margin: 0px;
    left: 0px;
    top: 0px;
    clip: rect(0px,auto,auto,0px);
    position: absolute;
    width: auto;
    min-width: 1024px;
}
.header {
    /* [disabled]float: left; */
    /* [disabled]height: 130px; */
    width: 100%;
}
.leftcol {
    /* [disabled]height: auto; */
    width: 150px;
    float: left;
    text-align: center;
    /* [disabled]position: absolute; */
    /* [disabled]left: 0px; */
    /* [disabled]top: 130px; */
    /* [disabled]clear: left; */
    /* [disabled]min-width: 150px; */
    /* [disabled]max-width: 160px; */
}
.content {
    height: auto;
    text-indent: 10px;
    overflow: scroll;
    /* [disabled]margin-left: 150px; */
    /* [disabled]margin-right: 150px; */
    min-width: 700px;
}
.rightcol {
    float: right;
    /* [disabled]height: auto; */
    width: 150px;
    clear: none;
    /* [disabled]min-width: 150px; */
    /* [disabled]max-width: 160px; */
}

body {
    background-image: url(../Fifty%20Stars%20Thirteen%20Stripes/fsts_banner_repeatstripes.png);
    background-repeat: repeat-x;
}
leftcollinks {
    color:#710808;
    text-align:center;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:16px;
    line-height:1.8;
    font-weight:bold;
}
p {
    margin-left:15px;
    margin-right: 15px;
    font-family: Tahoma, Geneva, sans-serif;
}
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Template_FSTS_Main.dwt" codeOutsideHTMLIsLocked="false" --><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Fifty Stars Thirteen Stripes</title>
<!-- InstanceEndEditable -->

<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
body {
    background-image: url(fsts_banner_repeatstripes.png);
}
</style>
<!-- InstanceEndEditable -->
<link href="styles.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/style.css"><script type="text/javascript" charset="utf-8" src="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/page_context.js"></script></head>

<body screen_capture_injected="true">
<div class="container">
  <div class="header"><img src="fsts_banner_name.png" width="400" height="130" alt="Fifty Stars Thirteen Stripes"></div>
  
  <div class="leftcol"><leftcollinks>
    American Politics<br>
    The Media<br>
    History<br>
    Economy<br>
    Education<br>
    Foreign Policy<br>
    Philosophy<br>
    Social Programs<br>
    Faith & Religion<br>
    U.S. Departments<br>
    Science & Tech<br>
    Books & Resources<br>
    Miscellaneous<br>
      <font color="#060648">
    About FSTS</font></leftcollinks><br>
  </div>
  <!-- InstanceBeginEditable name="EditRegion3" -->
  <div class="rightcol"><leftcollinks>
    American Politics<br>
    The Media<br>
    History<br>
    Economy<br>
    Education<br>
    Foreign Policy<br>
    Philosophy<br>
    Social Programs<br>
    Faith & Religion<br>
    U.S. Departments<br>
    Science & Tech<br>
    Books & Resources<br>
    Miscellaneous<br>
      <font color="#060648">
    About FSTS</font></leftcollinks><br></div><div class="content">
    <p>I've been thinking. That's the first good. For 31 years I haven't been...</p>
    <p>I'm writing this on a typical foggy evening in Monterey, California during the middle of September. I'm staring at a stack of books on my desk, each of them unread for reasons that have defined the first three decades of my life. Reasons I'm not proud of, and have little or nothing to show for. Forgiving myself is harder than I would have expected. However, self pity it seems, will lead me nowhere - something I learned recently from a man I like to call myself. </p>
    <p>What is it I want? Knowledge? To do what with? Would I be satisfied with reading every good book, article, newspaper and documentary in the world? To be filled with that much knowledge must be empowering, but logic says that's not enough. The man who invented the wrench didn't do it so he could hang it on a wall. He designed and manufactured it to serve a purpose. What good is knowledge if it doesn't serve a purpose? Knowledge must serve as a tool to create, to think, to design, to perform, to <i>do</i> something. Otherwise, the capacity of our brain has been wasted. Have I come to the right conclusion?</p>
    <p>'Tis a crafty trap, the world has sprang on the minds of society. We've become content with settling on another man's reasoning. Television, the internet, even the Government is happy to do the hard work for us. They'll simply tell us what to think by embedding a message behind a nice face, some modern special effects, feelings, anything at all to hold our attention. How many people know who their congressman is? What laws have gone into effect in your area in the past couple years? Which 2012 Presidential candidate better reflects your values? Is voting important? Could you explain why? How many of us know when the last U.S. servicemember died overseas? Where do your tax dollars go? If you don't know any of that but you know who Justin Beiber is dating - you're a victim of the trap. You've been conditioned to believe that Justin Beiber is important. How many of us work a dead-end job, and yet spend our free time watching "our shows" and opinion-filled news, playing video games, partying, etc? Worse yet, how many of us have no job at all and do the same thing?</p>
    <p>Well, if that is the world you desire, you can have it. I'm leaving it and never going back. I cannot fathom the hours, days, years I've wasted filling the mold of what today's America wanted me to be. I had no idea how to use my brain. I didn't know what I wanted, so I let someone else tell me. I didn't have values, morals, or principles that I derived on my own so I listened to the first shmuck with a smile and adopted his. I felt before I thought, and  it's brought me down a road of self pity and guilt. I didn't know whose standard I was trying to live up to, but I knew I was always falling short. I was never quite satisfied with life. </p>
    <p> More to follow...</p>
  </div>
  <!-- InstanceEndEditable -->
    
 </div>

<!-- InstanceEnd -->
</body></html>

相关问题
最新问题