CSS定位在DIV内部 [英] CSS positioning inside a DIV

问题描述

我一直在使用职位：绝对很长时间了，我得出的结论是，它的绝望。我希望我的应用程序是一个流畅的布局，所以它缩放与不同的决议。

I have been using Position: Absolute for a long time now and I've come to the conclusion that its hopeless. I want my application to be a fluid layout so it scales with different resolutions.

这是我想实现：

>

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

The middle section is a DayPilot Calender control and below is a input which you can enter notes which I have managed to achieve.

右位需要一个面板，其中我可以添加标签，下拉菜单和其他东西让用户添加东西到日历，但我不能好像把这里。

The right bit needs to be a panel where I can add labels, Drop down menus and other stuff for the user to add things to the calender, but I cant seem to put this there.

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

我的定位是否正确，如何在右侧

Is my positioning correct and how do i get a panel on the right hand side with a width of 140px

编辑：My CodePen www.codepen.io/anon/pen/snJAc pLoory感谢

My CodePen www.codepen.io/anon/pen/snJAc pLoory Thanks

推荐答案

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

处理id，只需将css添加到它们。

Heres the id's and just add the css to them.

这篇关于CSS定位在DIV内部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！