Html CSS在DIV中的定位

我使用Position:Absolute已经有很长一段时间了，我得出的结论是它是没有希望的。我希望我的应用程序是一个流动的布局，所以它的规模与不同的分辨率

这就是我努力实现的目标：

左手边的3个日历控件位于彼此的顶部，这是我成功实现的

中间部分是DayPilot日历控件，下面是一个输入，您可以输入我已设法实现的注释

正确的一点需要是一个面板，我可以添加标签，下拉菜单和其他东西的用户添加到日历的东西，但我似乎不能把这个放在那里

这是我的css：

#body {
height: 540px;  //This is the body section.
}

#dashboardinformataion { // this is the whole box you can see on the picture
height: 481px;
width: 80%;
margin: 0 auto 0;
display: flexbox;
display: -ms-flexbox;
}

#txt_headernotes { // this is the input for the input saying 'Notes' in image.
width: 100%;
text-align: center;
}

#txt_displayinformation { // this is the input below the notes section.
width: 100%;
height: 12.5%;
}

#middlesection { // this is the DIV wrapping the calender and the 2 input boxes.
height: 481px;
}

#calender_control { //This is in the Middle div above the notes input label.
width: 700px !important;
}

这是HTML：

        <div id="body">
        <div id="dashboardinformataion">
            <DayPilot:DayPilotNavigator ID="DayPilotNavigator1" runat="server" 
                BoundDayPilotID="calender_control" 
                SelectMode="Month"
                ShowMonths="3"
                SkipMonths="3"


                DataStartField="start"
                DataEndField="end" 
                VisibleRangeChangedHandling="CallBack"
                OnVisibleRangeChanged="DayPilotNavigator1_VisibleRangeChanged"

                >
            </DayPilot:DayPilotNavigator>

            <div id="middlesection">
                <DayPilot:DayPilotMonth CssClassPrefix="bsimplexcalender" OnCommand="calender_control_Command" ContextMenuID="menu" EventRightClickHandling="ContextMenu" EventRightClickJavaScript="select(e)" BubbleID="DayPilotBubble1" ClientObjectName="dpm" runat="server" ID="calender_control" Theme="bsimplexcalender" HeightSpec="Auto" Height="0" MinCellHeight="63" DataStartField="start" DataEndField="end" DataTextField="name" DataValueField="id" OnBeforeEventRender="calender_control_BeforeEventRender" />
                <input runat="server" id="txt_headernotes" placeholder="Notes" />
                <input runat="server" id="txt_displayinformation" />
            </div>

            <asp:Panel ID="Panel1" runat="server" BackColor="Black"></asp:Panel>



       </div>

我的位置正确吗？如何在右侧获得宽度为140px的面板

编辑：我的代码笔www.CodePen.io/anon/pen/snJAc pLoory谢谢

---

这是id，只需添加css即可。

因为您使用的是display:flexbox。。。您应该尝试使用它的特殊属性来设置布局。。你需要考虑3列而不是1列中间的内容，作为参考：@webkit我必须有3个不同的DIV标签吗？这就是它不起作用的原因？我会检查flexbox属性。如果你想要一个响应性的布局，用与草图相同的逻辑标记你的代码会更有意义。。所以，是的，使用3个div，这样可以更容易地控制响应css中每个容器内的元素。@webkit我使用了3个div，但我仍然看不到我的第三个div？您使用PX吗？这不意味着它不能扩展吗？是的，只要将它更改为%？我建议您使用已经构建的网格系统。自举或火箭之类的。

<div id="hold">
width:500px; margin: 0 auto;

<div id="left">
height: 500px;
width:100px;

</div>

<div id="middleHold">
float:left;

<div id="middle1">
height: 250px;
width: 300px;
</div>

<div id="middle2">
height: 50px;
width: 300px;
</div>

<div id="middle3">
height: 200px;
width: 300px;
</div>

</div> <!-- end #middleHold -->

<div id="right">
width: 100px;
height: 500px;
float:left;
</div>

</div> <!-- end #hold -->