Question

我现在觉得自己像个白痴。无论如何 - 该页面有三列。左右是固定宽度，必须保持不变。我需要中心列在浏览器窗口调整大小时调整大小。我知道，我知道，这不应该是艰难的，但它不会发生在我身上。继承人html：

<div class="bottom_content">

<div class="left_col">

<p>Keeping up with Commpro.Biz</p>

<div class="s_n_icons">

<img src="images/facebook.png" alt="facebook" />

<img src="images/flickr.png" alt="flickr" />

<img src="images/twitter.png" alt="twitter" />

<img src="images/youtube.png" alt="youtube" />

</div>

<p>User Name:<input ="text" size="20" name="username" value="" /></p>

<p>Password:<input ="text" size="20" name="password" value="" /></p>

<input type="button" value="submit" name="submit" />

<p><a href="#">Forgot Username or Password?</a>

<p>Click <a href="#">here</a> to sign up to receive the Commpro.Biz newsletter.</p>

<div id="twitter"></div>

</div>

<div class="center_col">

<p>What's Hot on Commpro.Biz</p>

<div class="hot_item">
hot item hot item hot item hot item hot item hot item hot itemhot item hot item
</div>

</div>

<div class="right_col">

<p>Our Partners</p>

<img src="images/BW.jpg" alt="Warren Buffett" />

<img src="images/IR_PRNewswire.gif" alt="newswire" />

<img src="images/Sysomo.gif" alt="Sysomo" />

</div>

<div id="footer">
    <p>Copyright 2011 by CommproBiz</p>
</div>
</div>

和.CSS

.left_col{
float:left;
width:190px;
height:auto;
padding-right:5px;
}

.center_col{
float:left;
width:auto;
padding:0 10px;
}

.hot_item{
width:auto;
background-color:red;
}

.hot_item a{
text-decoration:none;
}

.hot_item img{
float: right;
vertical-align: top;
}

.right_col{
float:right;
width:250px;
height:auto;
padding-left:5px;
}

.right_col img{
margin:5px;
}

正在发生的事情是，如果中心列中的内容很少，则三列表现出来。一旦超过一定数量的内容进入它，它就会落在左列之下，右列会下降。

Answer 1

如果浮动元素，则必须指定宽度。如果不这样做，那么浏览器的行为就没有指定的方式，因此每个浏览器的行为都可能不同。

你可以做的是给cols一个宽度百分比，所以例如左边是10％，中间是70％，右边是20％。

如果你想要右上左列的固定宽度。你应该将右侧的html移动到center-col之上。然后在css中你应该移除center-col上的float并给它一个margin-left：195px;和margin-right：255px;

Answer 2

我使用clear:both;属性将您的版权信息降低到左侧边栏下方，当页面填满内容时，版权会降低。

这是固定的HTML：

<div class="bottom_content">
<div class="left_col">
<p>Keeping up with Commpro.Biz</p>
<div class="s_n_icons">
<img src="images/facebook.png" alt="facebook" />
<img src="images/flickr.png" alt="flickr" />
<img src="images/twitter.png" alt="twitter" />
<img src="images/youtube.png" alt="youtube" />
</div>
<p>User Name:<input ="text" size="20" name="username" value="" /></p>
<p>Password:<input ="text" size="20" name="password" value="" /></p>
<input type="button" value="submit" name="submit" />
<p><a href="#">Forgot Username or Password?</a>
<p>Click <a href="#">here</a> to sign up to receive the Commpro.Biz newsletter.</p>
<div id="twitter"></div>
</div>
<div class="right_col">
<p>Our Partners</p>
<img src="images/BW.jpg" alt="Warren Buffett" />
<img src="images/IR_PRNewswire.gif" alt="newswire" />
<img src="images/Sysomo.gif" alt="Sysomo" />
</div>
<div class="center_col">
<p>What's Hot on Commpro.Biz</p>
<div class="hot_item">hot item hot item hot item hot item hot item hot item hot itemhot item hot item</div>
</div>
<div id="footer">
<p>Copyright 2011 by CommproBiz</p>
</div>
</div>
</body>

然后是固定的CSS：

.left_col{
float:left;
width:190px;
height:auto;
padding-right:5px;
}.center_col{
margin-left:195px;
margin-right:254px;
width:auto;
padding:0 10px;
}.hot_item{
width:auto;
background-color:red;
}.hot_item a{
text-decoration:none;
}.hot_item img{
float: right;
vertical-align: top;
}.right_col{
float:right;
width:250px;
position:relative;
left:1px;
padding-left:5px;
}.right_col img{
margin:5px;
}#footer{
clear:both;
}

希望有所帮助！

试图在窗口调整大小时获取div来缩小宽度

2 个答案: