gpt4 book ai didi

html - 如何使一行中的第一个 div 比第二个更宽

转载 作者:行者123 更新时间:2023-11-27 23:32:19 25 4
gpt4 key购买 nike

我在 3 个单独的 DIV 中制作了 3 个表单,我需要使第一个 div 比第二个和第三个更宽。我该如何实现?可以用“float”做到这一点吗?

<html>
<head>
<style>
div.item-1 {
float: left;
width: 150px;
height: 240px;;
border: 1px solid #000;
}
div.item-2 {
float: left;
width: 200px;
height: 140px;
border: 1px solid #000;
}
div.item-3 {
float: left;
width: 200px;
height: 140px;
border: 1px solid #000;

}
</style>
</head>
<body>
<div class="item-1">.1.</div>
<div class="item-2">.2.</div>
<div class="item-3">.3.</div>
</body>

</html>

我想这样做:

enter image description here

最佳答案

你不能,只能在视觉上伪造它:

div {
padding:1em;
float:right;
background:brown;
border:solid;
margin:0 10px 30px;
width:30%;
min-height:40vh;
box-shadow:0 0 0 21px white,0 23px,-23px 0 , -23px 23px 0 ;
}
.item-2 {
margin-left:40px;
box-shadow:0 0 0 21px white,0 23px,-23px 0 , -23px 23px 0, 20px 23px ;
}
.item-3 {
float:none;
width:auto;
min-height:70vh;
box-shadow:0 0;
}
<div class="item-1">.1.</div>
<div class="item-2">.2.</div>
<div class="item-3">.3.</div>

注意

  • float 反转它们

  • box-shadow 用于隐藏和伪造形状和边框

  • 一旦 item-1 和 item-2 的高度不同,视觉就会中断。

我不建议使用这个。

关于html - 如何使一行中的第一个 div 比第二个更宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57429481/

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