gpt4 book ai didi

html - CSS : Make only one div respond to the screen size

转载 作者:可可西里 更新时间:2023-11-01 14:56:20 24 4
gpt4 key购买 nike

我有以下 CSS。

#lll
{
float:left;
max-width:1000px;
border:1px solid;
}

#rrr
{
float:left;
width:300px;
border:1px solid;
}

ul
{
list-style:none;
}

li
{
float:left;
width:300px;
}

而我的HTML如下

<div id="lll">
Hello

<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>

<div id="rrr">
right!
</div>

JSFiddle 在这里 http://jsfiddle.net/SN674/1/

现在我想做的是,当我调整窗口大小时,我希望调整 div#lll 的大小,但让 div#rrr 保持在右侧。

现在,如果我调整窗口大小,div#rrr 会出现在 div#lll 下方。

我怎样才能做到这一点?

最佳答案

这是我在 CSS 中的做法:

http://jsfiddle.net/SN674/12/

<style type="text/css">
#lll
{
position: relative;
margin-right: 305px;
max-width:600px;
min-width: 40px;
border:1px solid;
}

ul
{
list-style:none;
}
li
{
width:300px;
}

#rrr
{
position:absolute;
right: -302px;
top: -1px;
width:300px;
border:1px solid;
}
</style>
<div id="lll">
Hello

<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<div id="rrr">
Whatever
</div>
</div>

这是 JQuery 中的一种方法(我会怎么做):

简答: http://jsfiddle.net/SN674/4/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>        
<script type="text/javascript">
$(function(){

$("div#lll").width($(document).width() - 350);
$(window).resize(function(){
$("div#lll").width($(document).width() - 350);
});
});
</script>
<div id="lll">
Hello
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div id="rrr">
Whatever
</div>

详细答案:步骤1。下载 jQuery

第 2 步。读这个: http://api.jquery.com/width/http://api.jquery.com/resize/

第 3 步。检查我做的这个例子:

<html>

<head>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div {
float: left;
width: 300px;
}
#solid {
background-color: yellow;
}
#liquid{
background-color: navy;
}

</style>
<title>
test
</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){

$("div#liquid").width($(document).width() - 301);
$(window).resize(function(){
$("div#liquid").width($(document).width() - 301);
});
});
</script>
</head>

<body>
<div id="liquid">
&nbsp;
</div>
<div id="solid">
&nbsp;
</div>
</body>
</html>

希望这能帮您解决问题

关于html - CSS : Make only one div respond to the screen size,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7694548/

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