gpt4 book ai didi

div 旁边的 CSS div 和第二个 div 的宽度

转载 作者:行者123 更新时间:2023-12-04 23:33:51 25 4
gpt4 key购买 nike

我正在尝试并排显示两个 div。第一个是 200x200 像素,第二个是第一个右边的 10 个像素。它有 200 像素高,其宽度必须填满页面右侧。

到目前为止我有这个:

<html>
<head>
<style>
div.div1 {
border: 1px solid red;
color: red;
width: 200px;
height: 200px;
float: left;
}

div.div2 {
border: 1px solid black;
width: 100%;
height: 200px;
float: left;
margin-left: 10px;
}
</style>
</head>
<body>

<div class="div1"></div>
<div class="div2">Test123</div>
</body>
</html>

这适用于前两个要求,但当我设置 width: 100% 时,它会在下方显示。如果我将它设置为以像素为单位的数字,它似乎可以工作,但不会在我更改窗口大小时进行调整。我该如何解决这个问题,使第二个元素一直向右延伸?

最佳答案

您可以在父级上使用flex,并设置.div2 { flex-grow: 1; } 让它消耗 .div1

剩余的所有可用空间

body {
display: flex;
}
.div1 {
width: 200px;
height: 200px;
color: red;
border: 1px solid red;
}
.div2 {
border: 1px solid black;
margin-left: 10px;
flex-grow: 1;
}
<div class="div1">div1</div>
<div class="div2">div2</div>

关于div 旁边的 CSS div 和第二个 div 的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42638560/

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