3

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;
}
4

2 に答える 2

6

divの順序を変更します。

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

次に、CSSで右の列を次のように変更します

.rightcol { float: right; }

float: left;コンテンツ div から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 に答える