0

私は現在練習サイトで作業していますが、ブラウザのサイズが変更されたときに左側と右側の幅が狭くなるのを防ぐ方法がわからないようです。真ん中もサイズ変更しますが、そのままにしておきたいです。私はそれがCSSレイアウトがそれをしている何かだと思います。下記参照。全部投稿しましたが、左右の欄に印が付いています。その下に、私が本体で使用するコードがあります。

CSS

body{
margin:0;
padding:0;
line-height: 1.5em;
color: black;
}

b{font-size: 110%;}
em{color: red;}
a{color: blue;}


/* text field */
textfield {
border-style: ridge;
background:#000000;
color: #000000;
}

/*TOPSECTION */
#topsection{
background: url('../images/bannerBGbkup.jpg'), url('../images/bannerBGl.jpg');
background-position: left top, left top;
background-repeat: no-repeat, repeat;
height: 200px; /*Height of top section*/
color: White;
text-align:center
}


#topsection a{
color: #FFFF80;
}

#topsection h1{
margin: 0;
padding-top: 25px;
text-align:Left
}

#topsection h2{
margin: 0;
padding-top: 0px;
text-align:Center
}

#topsection h3{
margin: 0;
padding-top: 0px;
text-align:Right
}

/* THIS IS NAV BAR */
ul#list-nav {

  margin:70px;
  margin-left: 20%;
  padding-Left:0;
  list-style:none;
  width:735px; /* 105 each */
}

ul#list-nav li {
  display:inline
}

ul#list-nav li a {
 text-decoration:none;
 padding:5px 0;
 width:100px;
 background:#7D7D7D;
 color:#eee;
 float:left;
}

ul#list-nav li a {
  text-align:center;
  border-left:1px solid #fff;
}

ul#list-nav li a:hover {
  background:red;
  color:#000
}

/* CONTENT */
#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 20% 0 20%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

/* LEFT COLUMN */
#leftcolumn{
float: left;
width: 20%; /*Width of left column in percentage*/
margin-left: -100%;
background: #5f5f5f;
color: White;
}

/* RIGHT COLUMN */
#rightcolumn{
float: left;
width: 20%; /*Width of right column in pixels*/
margin-left: -20%; /*Set margin to that of -(RightColumnWidth)*/
background: #5f5f5f;
color: White;
}

/* FOOTER */
#footer{
clear: left;
width: 100%;
background: black;
color: #5f5f5f;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

/*OTHER*/
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

体

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>20%</em></b> 
<table BACKGROUND="images/releases.jpg"width="175px"  Height="350px" border="1" cellspacing="12" cellpadding="15">
    <tr>
        <td>Limbo</td> 
    </tr>
    <tr>
        <td>Limbo was a great game 5 out of 5 stars. Game play takes you threw different levels. blah blah blah  Read More..</td>
    </tr>
</table> 
</div>
</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>20%</em></b> </div>
</div>

どうすればこれを解決できますか？

4

2 に答える 2

1

サイズを変更しているdivを使用min-widthしてみませんか？min-height

* min-widthとmin-heightは、要素がそれらによって定義された特定のサイズを下回らないようにします。*

于 2012-08-07T06:03:55.873 に答える
0

幅leftcolumnとrightcolumnパーセンテージを設定することは、ブラウザでサイズを変更するように明示的に要求することです（固定幅のコンテナが周囲にない場合）。縮めたくない場合は、特定のサイズを指定してください。

それらを縮小したいが、特定のサイズを下回らないようにしたい場合（たとえば、左列をその中のテーブルより小さくしたくない場合）、AshwinSinghが提案するように使用min-widthします。

于 2012-08-07T06:17:07.487 に答える