Question

我有一个日历，我正在尝试添加事件。每个事件都有一个样式，并且会有一个与之关联的链接。当每天只有一个事件时，它似乎正常，但是当我试图在一天内添加2个事件时问题就出现了。我玩过绝对和相对的位置，但它似乎没有起作用。我希望它看起来像这样： example Image 但它实际上看起来像这样：actual html

这是我的代码：

CSS

.calendarDay {
position: relative;
clear: none;
width: 14.2851%;
height: 142px;
background-image: url(images/calendarDayBG.png);
background-repeat: no-repeat;
background-size: cover;
font-family: "Stag Sans book", "Arial";
font-size: 45pt;
vertical-align: top;
color: #4d4f53;
overflow: hidden;
top: 40px;
text-align: left;
}

.calendarDay h1 {
font-family: "Stag Sans light", "Arial";
font-size: 45pt;
text-overflow:clip;
vertical-align: top;
}

/ *事件样式* /

    surgicalCare {
display: inline;
alignment-baseline:baseline;
background-color: #d75f17;
position: absolute;
}
surgicalCareStacked {
display: inline;
background-color: #d75f17;
position: absolute;
}
strategicaccounts {
display: block;
alignment-baseline:baseline;
background-color: #5e249e;
}

HTML

 <li class="fluid calendarDay zeroMargin_desktop">17<a href="EAST/msn.html"><div      class="fluid surgicalCareStacked">
     <p>E.A.S.T.</p>
   </div></a>
   <a href="EAST/sponsorship_EAST.html"><div class="fluid surgicalCare">
     <p>E.A.S.T.</p>
   </div></a></li>

我在想我可能需要使用不同的风格：一个用于一天中的多个事件“堆叠”，一个用一个事件......但我可能完全错了！

谢谢！

Answer 1

由于某种原因，您的图片无法使用。如果我理解你的问题，这就是你要找的东西：

 ______________________
|     Parent div       |
|  __________________  |
| |   Child div 1    | |
| |                  | |
| |__________________| |
|  __________________  |
| |   Child div 2    | |
| |                  | |
| |__________________| |
|______________________|

这样的事情会起作用：

HTML

<div id="parent">
    <div id="child1">
        <!-- Stuff here -->
    </div>
    <div id="child2">
        <!-- Stuff here -->
    </div>
</div>

CSS

#div1 {
    width: 250px; // Or whatever width you need
}

这是有效的，因为div默认是块元素，因此它们跨越其父元素的整个宽度，并强制其他元素向下。

如何在另一个div标签内堆叠2个div标签？

1 个答案: