3

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

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

我将内容(中间 div)宽度设置为多少?如果我执行 100%,它会将其放在左列下方 - 即使我在两侧设置 150 像素的边距以容纳列。如果我做“自动”,它也会破坏水平完整性。现在它是 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;
}
4

2 回答 2

6

更改 div 的顺序。

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

然后在 CSS 中将右列更改为

.rightcol { float: right; }

从内容 div中删除float: left;and 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>

于 2012-09-14T23:42:29.407 回答
1

.content 将通过这个 css 缩放高度以适应您的所有内容:

.header {
    position: absolute;
    width: 100%;
    height: 130px;
    top: 0;
    left: 0;
    background: #f00;
}

.container {
    position: relative;
    padding-top: 130px;    
    height: 100%;
}

.left,
.right {
    position: absolute;
    width: 150px;
    height: 100%;
    left: 0;
    top: 0;
    background: #0f0;
}

.right {
    left: auto;
    right: 0;    
    background: #0f0;
}

.center {
    padding: 0 150px;
    background: #00f;
}
<div class="header">I'm a header</div>
<div class="container">
    <div class="left">I'm on the left</div>
    <div class="right">I'm on the right</div>
    <div class="center">I'm center</div>
</div>

上面的例子作为小提琴(显示更正确):

http://jsfiddle.net/en6Cr/

于 2012-09-15T08:07:59.750 回答