Question

我目前在一个练习网站上工作，似乎无法弄清楚当浏览器调整大小时如何阻止左右两侧缩小宽度。中间也调整了大小，但是想保留它。我认为这是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;
}

BODY

<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>

我该如何解决这个问题？

Answer 1

为什么不将min-width和min-height用于正在调整大小的div？

* min-width和min-height确保您的元素不会低于他们定义的特定大小。 *

Answer 2

将leftcolumn和rightcolumn的宽度设置为百分比是一个明确的请求，要求他们使用浏览器调整大小（假设您没有固定宽度的容器）。如果您不希望它们缩小，请给它们一个特定的尺寸。

如果您希望它们缩小，但不要低于某个特定大小（例如，您不希望leftcolumn小于其中的表格），请使用min-width，如Ashwin Singh所示。

阻止我的网站的左侧和右侧改变宽度

2 个答案: