gpt4 book ai didi

html - 试图让一个 div 在窗口调整大小时缩小宽度

转载 作者:太空宇宙 更新时间:2023-11-04 16:17:00 25 4
gpt4 key购买 nike

我现在觉得自己像个白痴。无论如何 - 该页面有三列。右边和左边的宽度是固定的,必须保持不变。我需要在浏览器窗口调整大小时调整中心列的大小。我知道我知道,这不应该很难,但它不会发生在我身上。这是 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;
}

发生的事情是,由于中心列中的内容很少,所以三列会正常运行。一旦超过一定数量的内容进入其中,它就会落在左栏下方,右栏会下降。

最佳答案

如果你 float 一个元素,你必须指定一个宽度。如果您不这样做,那么浏览器就没有指定的行为方式,因此每个浏览器的行为可能会有所不同。

您可以做的是以百分比形式给列设置宽度,例如左边是 10%,中间是 70%,右边是 20%。

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

关于html - 试图让一个 div 在窗口调整大小时缩小宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7286044/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com