固定左右列，液体中部无法跨越整个页面

本文介绍了固定左右列，液体中部无法跨越整个页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！我试图不使用Adobe预定义的CSS模板，而是创建自己的模板。我有一个130像素的高度标题，我想跨越整个宽度。在那之下，我想要在页面最左侧和最右侧固定150px的列。中间，我想跨越浏览器的整个宽度。所有这些都包含在容器div中。我的标题很好，左上角宽度= 100％。接下来，左栏宽度= 150px并向左浮动。没问题。然后，当我向左浮动时，内容出现在应该出现的位置。然后，150px宽的右列也浮出左边。我应该如何设置内容（中间格）的宽度？如果我做到了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）; 位置：绝对; width：auto; min-width：1024px; } .header { } .leftcol { width：150px; float：left; text-align：center; } .content { height：auto; float：left; text-indent：10px; overflow：scroll; 宽度：70％; min-width：700px; } .rightcol { float：left; width：150px; 明确：无; 解决方案更改div的顺序。 < div class =leftcol>< / div> < div class =rightcol>< / div> < div class =content>< / div> 然后在CSS中右键变为 .rightcol {float：right; } 删除 float：left; 和 width：70％; 来自内容div（不浮点，无宽度） - 更新可执行代码段： @charsetutf-8; / * CSS Document * /。container {float：left ;身高：自动; padding：0px; margin：0px; left：0px; top：0px; clip：rect（0px，auto，auto，0px）;位置：绝对;宽度：自动; min-width：1024px;}。header {/ * [disabled] float：left; * / / * [disabled] height：130px; * / width：100％;}。leftcol {/ * [disabled] height：auto; * / width：150px;向左飘浮; text-align：center; / * [禁用]位置：绝对; * / / * [disabled] left：0px; * / / * [禁用]顶部：130px; * / / * [禁用]清除：左侧; * / / * [禁用] min-width：150px; * / / * [禁用]最大宽度：160px; * /}。content {height：auto; text-indent：10px;溢出：滚动; / * [禁用] margin-left：150px; * / / * [禁用] margin-right：150px; * / min-width：700px;}。rightcol {float：right; / * [disabled] height：auto; * / width：150px;清除：无; / * [disabled] min-width：150px; * / / * [禁用]最大宽度：160px; * /} body {background-image：url（../ Fifty％20Stars％20Thirteen％20Stripes / fsts_banner_repeatstripes.png）; background-repeat：repeat-x;} leftcollinks {color：＃710808;文本对齐：中心; font-family：Palatino Linotype，Antiqua书，Palatino，serif;字体大小：16px的;行高：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.dwtcodeOutsideHTMLIsLocked =false - >< head>< meta http-equiv =Content-Typecontent =text / html; charset = utf-8><！ - InstanceBeginEditable name =doctitle - >< title> Fifty Stars <！ - InstanceEndEditable - ><！ - InstanceBeginEditable name =head - >< style type =text / css> body {background-image：url （fsts_banner_repeatstripes.png）;}< / style><！ - InstanceEndEditable - >< link href =styles.css =stylesheettype =text / css>< link type =text / css =stylesheethref =chrome-extension：//cpngackimfmofbokmjmljamhdncknpmg/style.css>< script type =text / javascriptcharset =utf-8src =chrome-扩展：//cpngackimfmofbokmjmljamhdncknpmg/page_context.js>< / script>< / head>< body screen_capture_injected =true>< div class =container> < div class =header>< img src =fsts_banner_name.pngwidth =400height =130alt =Fifty Stars Thirteen Stripes>< / div> < div class =leftcol>< leftcollinks>美国政治< br>媒体< br>历史和LT峰; br>经济<峰; br>教育及LT峰; br>外交政策< br>哲学LT峰; br>社交活动< br>信念&宗教与LT峰; br>美国部门< br>科学&技术与LT峰; br>书籍&资源与LT峰; br>杂<峰; br> < font color =＃060648>关于FSTS< / font>< / leftcollinks>< br> < / DIV> <！ - InstanceBeginEditable name =EditRegion3 - > < div class =rightcol>< leftcollinks>美国政治< br>媒体< br>历史和LT峰; br>经济<峰; br>教育及LT峰; br>外交政策< br>哲学LT峰; br>社交活动< br>信念&宗教与LT峰; br>美国部门< br>科学&技术与LT峰; br>书籍&资源与LT峰; br>杂<峰; br> < font color =＃060648>关于FSTS< / font>< / leftcollinks>< br>< / div>< div class =content> < p>我一直在想。这是第一好。 31年来，我一直没有...< / p> < p>我在9月中旬在加利福尼亚州蒙特雷的一个典型的模糊夜晚写这篇文章。我盯着桌子上的一堆书，因为定义了我一生的前三十年的原因，每一本书都是未读的。我不引以为豪的原因，没有什么可以展示的。原谅自己比我预想的要难。然而，看起来很自怜，会导致我无处 - 我最近从一个我喜欢自称的男人身上学到的东西。 < / p为H. < p>我想要什么？知识？要做什么？我会满足于阅读世界上每一本好书，文章，报纸和纪录片吗？要充实这些知识必须具有授权能力，但逻辑认为这还不够。发明扳手的人没有这样做，所以他可以把它挂在墙上。他设计和制造它是为了达到目的。如果知识不起作用，有什么好处？知识必须成为创造，思考，设计，执行和/或执行< / i>工作的工具。一些东西。否则，我们的大脑的能力就被浪费了。我有没有得出正确的结论？< / p> < p>这是一个狡猾的陷阱，世界已经涌现在社会的头脑中。我们已经满足于解决另一个男人的推理。电视，互联网，甚至政府也乐于为我们做好工作。他们只会通过在漂亮的脸孔后面嵌入信息，一些现代的特殊效果，感受，以及任何东西来引起我们的注意，告诉我们该怎么想。有多少人知道他们的议员是谁？过去几年你所在地区有哪些法律生效？哪位2012年总统候选人更能反映你的价值观？投票重要吗？你能解释为什么吗？我们当中有多少人知道最后一位美国军人何时去世？你的税收在哪里去？如果你不知道这些，但你知道贾斯汀贝贝正在约会 - 你是陷阱的受害者。你已经习惯相信Justin Beiber很重要。我们中有多少人在做一个死胡同的工作，但是我们的空闲时间可以用来观看我们的节目和充满舆论的新闻，玩电子游戏，聚会等？更糟的是，我们有多少人完全没有工作，并且做同样的事情？< / p> < p>那么，如果那是你渴望的世界，你可以拥有它。我离开它，永不回头。我无法想象我浪费了几个小时，几天，几年，填补了当今美国人希望我成为的模子。我不知道如何使用我的大脑。我不知道我想要什么，所以我让其他人告诉我。我没有自己的价值观，道德观或原则，所以我笑着听第一首诗，并采纳了他的意思。在我想到之前，我感觉到了这一点，它让我走上了一条自怜与内疚的道路。我不知道我试图辜负谁的标准，但我知道我总是不足。我从来没有对生活感到满意。 < / p为H. < p为H.更多关注...< / p> < / DIV> <！ - InstanceEndEditable - > < / div><！ - InstanceEnd - >< / body>< / html> I'm trying to not use adobe pre-defined CSS templates and instead create my own. I have a 130px height header i want to span the entire width. Beneath that, I want fixed columns of 150px on the far left and far right of the page. The middle, I want to span the entire width of the browser. All of these contained in a "container" div.My header is fine, floated left and width = 100%. Next, left column width = 150px and floated left. No problem. Then, the "content", which when i float left appears in line where it should be. Then the 150px-wide right column, also floated left.What do I set the content (middle div) width to be? If I do 100%, it puts it beneath the left column - even if I set margins of 150px on both sides to accommodate the columns. If I do "auto" it also breaks the horizontal integrity. Right now it's at 70%, which makes them all line up, but doesn't take up the full screen at large resolutions. (I have a minimum width set). This seems like it should be an easy fix - my hunch is that it has something to do with the "absolute" positioning of the container div. Thanks for any ideas/help.Here is the link to the page:http://www.mynextbit.com/Fifty%20Stars%20Thirteen%20Stripes/index.htmlHere is my code:.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;} 解决方案 change the order of the divs.<div class="leftcol"></div><div class="rightcol"></div><div class="content"></div>then in CSS change right col to.rightcol { float: right; }remove the float: left; and width: 70%; from the content div (no float, no width)Sep 17, 2014 - Update with executable snippet:@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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Fifty Stars Thirteen Stripes</title><style type="text/css">body { background-image: url(fsts_banner_repeatstripes.png);}</style><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>  <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>  </div></body></html> 这篇关于固定左右列，液体中部无法跨越整个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！