怎么设置两个div的宽度相等，并且能够随着页面的宽度改变而动态变化？

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1{
    height:500px;
    float:left;
}
#div2{
    height:500px;
    width:1000px;
    float:left;
}
#div3{
    height:500px;
    float:left;
    float:left;
}

div2的宽度为定长，怎么设置div1和div2的宽度相等且等于页面总宽度减去div2的宽度的一半，最好给出个具体代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">

#div1{
    height:500px;
    float:left;
    width: calc( (100% - 1000px) / 2 );
    background-color: #9f6;
}
#div2{
    height:500px;
    width:1000px;
    float:left;
    background-color: #f90;
}
#div3{
    height:500px;
    float:left;
    width: calc( (100% - 1000px) / 2 );
    background-color: #0ff;
}

</style>
</head>
<body>

<div id="box">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>

#div1{

height:500px;

float:left;

width: calc( (100% - 1000px) / 2 );

}

#div2{

height:500px;

width:1000px;

//width: calc( (100% - 1000px) / 2 );

float:left;

按需要来，如果要俩都根据屏幕宽度变的话都用width: calc( (100% - 1000px) / 2 );，如果不用的话就第一个变第二个固定宽

}

用display:flex 弹性盒做比较好吧

使用百分比宽度，或使用css3的媒体查询功能

考虑兼容的话，用百分比做，不考虑兼容的flex布局或grid布局都可以

最简单的就是不固定div的大小，而使用百分比大小表示，这样页面变化时，div会自动变大变小。或者设置几个媒体查询，通过对屏幕大小的查询，对div进行的大小进行设置，这样会比百分比表示更适应网页整体变化，不容易出现布局错乱。

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632