用一个 div 覆盖 2 个 div (ASP.NET Core)

洛根

我的视图中有 2 个部分。

这是视图的代码:

<section id="about" class="container content-section text-center">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
            <h2>About Grayscale</h2>
            <p>
               
            </p>
            <p>
              
            </p>
            <p>Н</p>
        </div>
       
</section>
<!-- Download Section -->
<section id="download" class="content-section text-center">
    <div class="download-section"> 
        <div class="container">
            <div>
                <h2 style="text-align: center;">Программа обучения VR</h2>
               <div style="width:30%;height:530px;float:left;border-style:solid;border-width:15px;border-color:#42DCA3">
                   <p style="padding-top:10px;font-size:30px;"><b>VR</b></p>
                   <p style="color:#FFD700;font-size:35px;"><b><strike>3600  грн </strike></b></p>
                   <p style="color:black;font-size:28px;"><b>2600  грн до 24.06.17 </b></p>
                   <div style="border-bottom: 1px solid #42DCA3;border-top: 1px solid #42DCA3;padding: 20px 0;margin-bottom: 20px;font-size:20px;">
                         6 недель, 12 занятий,36 часов<br>
                         + практика с HTC Vive<br>
                         + создание 3D объектов<br>
                         + создание ролика с камерой 360°
                   </div>
                   <div style="font-size:20px;">Старт 01.07.17</div>
                   <div style="margin: 0 auto;padding-top:20px;">
                <button class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Оставить заявку</button>
                </div>
               </div>
              
            </div>
           
        </div>
    </div>

这是所有带有 css 的代码

我需要在设计中创建像这里这样覆盖这 2 个 div 的块

在此处输入图片说明

我怎么能做到这一点?

感谢帮助。

米罗斯拉夫·乔纳斯

为了将价格块正确定位在左侧,它应该是第一个元素(参见下面的片段)。不确定叠加是什么意思,因为这可以通过使用图像和深色作为 DIV 的背景来实现,因此不需要实际叠加。

但是,如果您需要覆盖 div,那么您可以使用绝对位置或使用弹性框。

<section id="about" class="container content-section text-center">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
            <h2>About Grayscale</h2>
            <p>
               
            </p>
            <p>
              
            </p>
            <p>Н</p>
        </div>
       
</section>
<!-- Download Section -->
<section id="download" class="content-section text-center">
    <div class="download-section"> 
        <div class="container">
            <div>
                
               <div style="width:30%;height:530px;float:left;border-style:solid;border-width:15px;border-color:#42DCA3; margin-right: 20px">
                   <p style="padding-top:10px;font-size:30px;"><b>VR</b></p>
                   <p style="color:#FFD700;font-size:35px;"><b><strike>3600  грн </strike></b></p>
                   <p style="color:black;font-size:28px;"><b>2600  грн до 24.06.17 </b></p>
                   <div style="border-bottom: 1px solid #42DCA3;border-top: 1px solid #42DCA3;padding: 20px 0;margin-bottom: 20px;font-size:20px;">
                         6 недель, 12 занятий,36 часов<br>
                         + практика с HTC Vive<br>
                         + создание 3D объектов<br>
                         + создание ролика с камерой 360°
                   </div>
                   <div style="font-size:20px;">Старт 01.07.17</div>
                   <div style="margin: 0 auto;padding-top:20px;">
                <button class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Оставить заявку</button>
                </div>
               </div>
              <h2 style="text-align: center; padding-top: 100px;">Программа обучения VR</h2>
<div style="padding: 10px;">01</br>02</br>03</br>04</br>05</br></div>
            </div>
           
        </div>
    </div>

添加

如果这是您要查找的内容,这里是带有绝对位置的简单代码片段。

.top-div {
  width: 400px;
  height: 200px;
  background: url('https://photos.smugmug.com/Stock-images/Westward-Expansion-Photos/gettysburg-battlefield-photos/i-S8rSqgg/1/70e2c6c8/S/Gettysburg%20Battlefield%20Photos-S.jpg');
}
.bottom-div {
  width: 400px;
  height: 400px;
  background: Orange;
  box-sizing: border-box;
  padding: 10px 10px 10px 200px;
}
.overlay-holder {
  position: relative;
}
.overlay {
  position: absolute;
  top: 100px;
  left: 10px;
  width: 180px;
  background: LightBlue;
  box-sizing: border-box;
  padding: 10px;
}
<div class="overlay-holder">
  <div class="overlay">
    This text is in the overlay<br/>
    This text is in the overlay<br/>
    This text is in the overlay<br/>
    This text is in the overlay<br/>
    This text is in the overlay<br/>
    This text is in the overlay<br/>
    This text is in the overlay<br/>
    This text is in the overlay<br/>
    This text is in the overlay<br/>
  </div>
</div>
<div class="top-div"></div>
<div class="bottom-div">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

用另一个 div 替换 div (ASP.NET MVC)

来自分类Dev

CSS覆盖div与另一个div

来自分类Dev

无法在ASP.NET中的另一个前面设置一个div

来自分类Dev

用另一个 div 覆盖浮动 1 步左 div

来自分类Dev

2个“静态” div之间的“动态” div [CSS] [ASP.NET]

来自分类Dev

asp.net每3个结果在一个转发器上包装一个div

来自分类Dev

如何使一个div覆盖不同行中的另一个div

来自分类Dev

如何使一个div覆盖不同行中的另一个div

来自分类Dev

从asp.net后面的代码中添加一个包含asp标签的div

来自分类Dev

如何使背景覆盖一个单独的div?

来自分类Dev

下一个js覆盖main div

来自分类Dev

在图像jQuery上覆盖一个div

来自分类Dev

覆盖前一个div的Bootstrap面板

来自分类Dev

如何制作一个覆盖屏幕所有区域的div,除了固定div覆盖的区域?

来自分类Dev

如何停止GridView在asp.net中创建一个div

来自分类Dev

并排固定div-一个覆盖另一个

来自分类Dev

在 div 内创建一个 2 div 共享空间

来自分类Dev

尝试覆盖2个子div之间的父div宽度的100%(不包括填充)。

来自分类Dev

停止一个div的背景色覆盖另一个旋转后重叠的div的内容

来自分类Dev

如何通过z-index将一个div覆盖另一个div

来自分类Dev

如何将一个 div 覆盖在另一个 div 上(没有绝对位置......)?

来自分类Dev

向上滑动时,将堆叠的div覆盖在另一个div上方

来自分类Dev

html / css另一个div内的全背景覆盖div

来自分类Dev

绝对位置div不覆盖另一个div子对象

来自分类Dev

当半透明div覆盖另一个div时,CSS会消除悬停效果

来自分类Dev

向上滑动时,将堆叠的div覆盖在另一个div上方

来自分类Dev

绝对位置div不会覆盖另一个div子对象

来自分类Dev

position: Sticky 导致我的 div 大小加倍并覆盖前一个 div

来自分类Dev

两个div覆盖屏幕的100%

Related 相关文章

  1. 1

    用另一个 div 替换 div (ASP.NET MVC)

  2. 2

    CSS覆盖div与另一个div

  3. 3

    无法在ASP.NET中的另一个前面设置一个div

  4. 4

    用另一个 div 覆盖浮动 1 步左 div

  5. 5

    2个“静态” div之间的“动态” div [CSS] [ASP.NET]

  6. 6

    asp.net每3个结果在一个转发器上包装一个div

  7. 7

    如何使一个div覆盖不同行中的另一个div

  8. 8

    如何使一个div覆盖不同行中的另一个div

  9. 9

    从asp.net后面的代码中添加一个包含asp标签的div

  10. 10

    如何使背景覆盖一个单独的div?

  11. 11

    下一个js覆盖main div

  12. 12

    在图像jQuery上覆盖一个div

  13. 13

    覆盖前一个div的Bootstrap面板

  14. 14

    如何制作一个覆盖屏幕所有区域的div,除了固定div覆盖的区域?

  15. 15

    如何停止GridView在asp.net中创建一个div

  16. 16

    并排固定div-一个覆盖另一个

  17. 17

    在 div 内创建一个 2 div 共享空间

  18. 18

    尝试覆盖2个子div之间的父div宽度的100%(不包括填充)。

  19. 19

    停止一个div的背景色覆盖另一个旋转后重叠的div的内容

  20. 20

    如何通过z-index将一个div覆盖另一个div

  21. 21

    如何将一个 div 覆盖在另一个 div 上(没有绝对位置......)?

  22. 22

    向上滑动时,将堆叠的div覆盖在另一个div上方

  23. 23

    html / css另一个div内的全背景覆盖div

  24. 24

    绝对位置div不覆盖另一个div子对象

  25. 25

    当半透明div覆盖另一个div时,CSS会消除悬停效果

  26. 26

    向上滑动时,将堆叠的div覆盖在另一个div上方

  27. 27

    绝对位置div不会覆盖另一个div子对象

  28. 28

    position: Sticky 导致我的 div 大小加倍并覆盖前一个 div

  29. 29

    两个div覆盖屏幕的100%

热门标签

归档