在DIV中定位CSS

Question

我已经使用位置：绝对很长一段时间了，我得出的结论是它毫无希望。我希望我的应用程序是一个流畅的布局，因此它可以根据不同的分辨率进行扩展。

这就是我想要实现的目标：

左手边3个日历控制在我已经设法实现的彼此之上。

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

正确位需要是一个面板，我可以添加标签，下拉菜单和其他东西供用户添加到日历中，但我似乎无法将其放在那里。 / p>

这是我的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>

我的定位是否正确，如何在右侧获得宽度为140像素的面板

编辑：我的CodePen www.codepen.io/anon/pen/snJAc pLoory谢谢

Answer 1

<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 -->

继承人的身份，然后将css添加到他们身上。