将div设置为另一个Div css
将div设置为另一个div的CSS可以通过以下方式实现：
- 使用position属性：
- 将外层div设置为相对定位（position: relative;）
- 将内层div设置为绝对定位（position: absolute;）
- 使用top、left、right、bottom属性来调整内层div在外层div中的位置
- 示例代码：
- 示例代码：
- 使用flexbox布局：
- 将外层div设置为flex容器（display: flex;）
- 将内层div设置为flex项（flex: 1;）
- 示例代码：
- 示例代码：
- 使用grid布局：
- 将外层div设置为grid容器（display: grid;）
- 将内层div放置在grid单元格中
- 示例代码：
- 示例代码：
以上是将div设置为另一个div的几种常见方式，具体选择哪种方式取决于布局需求和设计目标。腾讯云相关产品和产品介绍链接地址请参考腾讯云官方网站。
相关·内容
2回答
这让我很困惑。我将border-right、border-left和border-bottom应用到一个div中，该div中有另一个绿色BG颜色div。我在带有边框的父div上设置了z-index: 1和position: relative。
但是，正如您在照片中所看到的，只有左边框获得应用于它的z-索引，而右边框没有得到z-索引，落后于绿色div。
只有当我在inner-div上设置的宽度比外部div宽时才会发生这种情况，而且它似乎只会阻止第一个边框--就在bg之上，因为重复元素不会受到此问题的影响。
这是没有意义的，而且在Chrome、Firefox和Edge上都是一致的。
这是我刚刚发现
浏览 0提问于2019-08-14得票数 1
回答已采纳
我只想在一个div里面有一个div，如下所示：
甚至有可能。我是说。为什么在这个世界上它是如此困难。我只想要一个以mofo div为中心的mofo div，但不是100%的宽度/高度。
我的代码：
<!-- Fotos servicios -->
<div id="div-servicios" class="container mt-2 mb-4">
<div class="row justify-content-center align-items-center fondo-negro-trans
浏览 0提问于2018-07-19得票数 0
回答已采纳
1回答
我的网站使用了一些隐藏/显示覆盖onclick的图片。 我已经使用.img-container::after和.img-container::before在这些图像周围构建了一个自定义边框 当切换图像覆盖时，我不明白为什么边框会改变其高度。我的目的是让边框始终显示在静态图像周围。 请看下面的例子。谢谢你的建议。 function toggleImage(){
document.querySelector('#PlanOverlay').classList.toggle('img-hidden');
} .container {
position:
浏览 6提问于2021-08-31得票数 2
回答已采纳
4回答
我正在尝试创建一个大矩形，其中一些子矩形在HTML中被开槽。我原以为这很简单，但我的CSS显然很差。
目前，我可以创建外部div和内部div与固定的位置，如果屏幕大小等中断。我想让它的响应。小提琴是@
.outer-div {
display: inline-block;
height: 150px;
width: 30px;
border: 3px solid grey;
margin-left: 10px;
margin-right: 10px;
}
.inner-div {
position: fixed;
border: 1px solid bl
浏览 1提问于2020-02-13得票数 0
回答已采纳
我想使用相同的HTML结构在桌面和移动平台上显示一个由FLEX组成的表，但是我不知道将列的跨度改为行的跨度，我知道position: absolute不是一个好的维护方法
.wrapper {
display: flex;
}
.block {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.block1 {
background-color: cadetblue;
}
.block
浏览 1提问于2018-05-10得票数 2
回答已采纳
3回答
我正在学习HTML/CSS，我在寻找一种方法来设置与容器相关的元素时遇到了一些麻烦。
我读过“相对”和“绝对”定位的区别。“相对”定位，相对于默认位置定位元素。但是，有没有一种方法可以相对于容器(在本例中是橙色框)定位元素？
例如，是否有一种方法可以将所有文本和img放在橙色框中，这样每当我决定移动橙色框时，里面的所有元素都将保持不变？
HTML：
<div class="container">
<div id="snappyText">
<p>Ever think,
浏览 0提问于2012-05-25得票数 0
回答已采纳
4回答
编辑的清晰度：
我有一些图像，应该相互重叠，并放置在固定的div，#all底部。
图像的顶部和左边的值应该指定它们相对于容器的位置。这使得它们可以互相重叠。
那个容器应该放在#all的底部。
问题是，image_container div不会跌到底部。
HTML：
<div id="all">
<div id="left">
<div>Some Text</div>
<div id=image_container>
<img style="left: 50p
浏览 5提问于2017-03-06得票数 0
回答已采纳
我很少有与CSS-中的溢出属性相关的查询，请检查下面的代码片段，
.outer-div {
display: flex;
position: relative;
height: 3.5em;
width: 20%;
border: 2px solid #000000a3;
margin-left: 300px;
align-items: center;
border: 1px solid green;
}
.inner-div {
border: 1px solid blue;
position: absolute;
浏览 1提问于2017-12-08得票数 1
回答已采纳
我试图根据屏幕大小动态地在div (button-menu)中定位几个按钮，使其位于另一个div (容器)之下。现在，如果屏幕尺寸低于700px，我有一个图像(character_image)，它在容器下方移动并在右侧对齐。 当屏幕小于700px时，我需要我的按钮菜单按钮总是在容器下面，但不能与character_image重叠或定位在下面。 这是我正在尝试做的事情(Photoshopped)。 📷 📷 做这件事最好的方法是什么？我知道通常我可以使用flex-box将按钮菜单定位在character_image旁边，但由于该图像已经通过媒体查询动态定位，我不知道如何将按钮菜单
浏览 62提问于2021-06-22得票数 0
回答已采纳
1回答
我为等级系统做了这样的事。但我想我做错了什么是因为我的粗心大意。举个例子，我展示了数字10，但是这个数字是1-2-3等等，当我们这样做的时候，它就会分解。你能帮忙吗
.box {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(40deg, #ffffff, #0c8a86 50%, #ffffff);
animation: rotate 12s linear infinite;
display: inline-grid;
浏览 2提问于2022-10-17得票数 0
我有下面的html和css。如果我将位置属性从绝对更改为相对属性，div.raw似乎会在html布局中流动，而背景图像并不能掩盖一切。如果我没有，那它就会。为什么会这样呢？
HTML:
<h1 class="push">Hello World</h1>
<div class="container">
Some text
<div class="raw"></div>
</div>
CSS:
.push {
margin-bottom: 50px;
margin-t
浏览 2提问于2015-04-04得票数 1
我已经将position: fixed;添加到放置菜单和徽标的顶部部分。它确实在向下滚动的同时继续显示菜单，但它也打乱了徽标和菜单的顺序和空间。有没有办法克服这个问题？或者是在向下滚动时保留菜单的另一种方法？
html {
scroll-behavior: smooth;
}
body {
background: #fafafa;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 3fr 3fr 3fr 2fr;
浏览 0提问于2020-09-10得票数 3
4回答
我想在容器中实现3个DIVs，就像表行一样。
top {height =100 top}/中间{middle=动态}/底部 {height =100 top}
现在的问题是，怎样才能使中档的高度保持动态，并保持结构正确。
以下是我迄今所做的工作：
HTML
<div id="notification">
<div id="n-top">
top
</div>
<div id="n-middle">
middle<br /><br /><br />
浏览 5提问于2012-01-27得票数 0
回答已采纳
5回答
我有两个硬币。外径占25%。内部div位于底部(position: fixed; bottom: 0; width: 25%; border-top: 1px solid red)，但不占25%。
我要为这个div增加边框。因此，由于宽度的关系，有一个空白正在显示。
HTML：
<div id="main-div">
<div id="outer-div">
<div id="div-1"></div>
<div id="div-2"&g
浏览 4提问于2017-01-02得票数 0
我一直试图为HTML页面创建一个更新日志。问题是，工作是“让它看起来漂亮”--这是我被问到的问题的确切引语。他们希望在每个div的角落都有一个特定的图像，但我遇到了一个问题。有些div滚动，特别是更新日志。每当我试图使div滚动，图像粘在一个点(图片的解释附件)。我试图使它的图像坚持到他们的角落，而不管滚动，不要移动卷轴。有办法这样做吗？CSS和HTMl很好，我只是想把它限制在项目的HTML上。
编辑:忘了说这句话，但每当我使用位置-修复它结束到页面的边缘，而不是div。这也必须是移动友好的最好。
它所做的：
我需要它做什么(通过FireAlpaca编辑的图像，而不是实际发生的事情)：
我当前
浏览 1提问于2022-08-04得票数 0
4回答
我需要使用这个形状，在内部显示一个文本。但是，我不知道为什么文本是没有显示。
HTML：
<div id="thebag">
<h3> Shihab Mridha </h3>
</div>
CSS：
#thebag{
position: relative;
overflow: hidden;
}
#thebag::before{
content: '';
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 30%;
浏览 5提问于2016-01-26得票数 2
回答已采纳
2回答
body {
background: url('images/hero_2.jpg');
background-repeat: no-repeat;
background-position: top;
background-size: 100%;
margin: 0px 0px;
}
#container_1 {
width: 100%;
浏览 2提问于2014-12-30得票数 0
我正在通过做这个来练习编码，我唯一有问题的就是里面有箭头的小黑条。我使用的位置绝对，但它不是很好的工作，因为网站是响应。什么是一个很好的替代方式来定位这一点。
/* Mobile First */
:root {
--DarkGrey: hsl(0, 0%, 63%);
--Black: hsl(0, 0%, 0%);
--White: hsl(0, 0%, 100%);
--VeryDarkGray: hsl(0, 0%, 27%);
}
body {
font-family: "League Spartan", sans-s
浏览 3提问于2022-06-06得票数 1
2回答
网格项的覆盖
、、
我正在使用React，并且我试图在网格中的每个网格项上有一个覆盖。但是，我所尝试的是，覆盖似乎在每个网格项之下，而不是在网格项之上。即使我使用position: absolute，它也不起作用！
下面是我为网格使用的代码(React)：
<div className="home__itemSection">
<div className="item">
<div className="item__container">
<div className="container_
浏览 0提问于2021-03-21得票数 2
回答已采纳
2回答
我有一个游戏控制器，我最终将使用sprites来按下按钮等等。当时我用图片标签内联了这张照片。 然后我创建了三个空的div，并给它们一个50pxx50px的大小，并将它们的绝对位置放在两个按钮和start按钮上。 使用Javascript，我让div有了一个事件侦听器来播放声音/开始网页。 我现在的问题是响应性我使用了display flex作为网页，但我相信因为我使用了位置绝对，所以它不会响应性。 我一直在尝试使用媒体查询来保持div覆盖在屏幕尺寸上的按钮，但我仍然有这个问题。 完成我正在做的事情的正确/更好的方法是什么？或者为什么我的媒体查询在调整页面大小时失败。 小提琴https://
浏览 23提问于2019-06-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
