一个DIV中CSS定位 [英] CSS positioning inside a DIV

问题描述

我一直在使用位置是：绝对很长一段时间，现在，我已经得出结论，它的无望。我想我的应用程序是一个流动布局使其具有不同分辨率缩放。

这就是我想实现：

在离开右手边3日历上的海誓山盟，我已经成功地实现顶部的控制。

在中部分是DayPilot日历控制及以下是你可以进入我已成功地实现音符输入。

在右侧位需要一个小组在那里我可以添加标签，下拉菜单和其他的东西，为用户的东西添加到日历，但我似乎无法把这个那里。

下面是我的CSS：

  #body {
高度：540px; //这是身体部分。
}#dashboardinformataion {//这是整个中，您可以在图片中看到
高度：481px;
宽度：80％;
保证金：0汽车0;
显示：Flexbox的;
显示：-ms-Flexbox的;
}#txt_headernotes {//这是输入并称图像的注意的投入。
宽度：100％;
文本对齐：中心;
}#txt_displayinformation {//这是下面的注释部分的投入。
宽度：100％;
高度：12.5％;
}#middlesection {//这是DIV包裹压延和2输入框中。
高度：481px;
}#calender_control {//这是在附注中输入标签上方中东股利。
！宽度：700像素重要;
}
 

这是HTML：

 ＆LT; D​​IV ID =身体＆GT;
        ＆LT; D​​IV ID =dashboardinformataion＆GT;
            ＆LT; D​​ayPilot：DayPilotNavigator ID =DayPilotNavigator1=服务器
                BoundDayPilotID =calender_control
                SelectMode =月
                ShowMonths =3
                SkipMonths =3
                DataStartField =开始
                DataEndField =结束
                VisibleRangeChangedHandling =回调
                OnVisibleRangeChanged =DayPilotNavigator1_VisibleRangeChanged                ＆GT;
            ＆LT; / DayPilot：DayPilotNavigator＆GT;            ＆LT; D​​IV ID =middlesection＆GT;
                ＆LT; D​​ayPilot：DayPilotMonth的CssClass preFIX =bsimplexcalender按需=calender_control_CommandContextMenuID =菜单中的EventRightClickHandling =文本菜单EventRightClickJavaScript =选择（E）BubbleID =DayPilotBubble1ClientObjectName =DPMRUNAT =服务器ID =calender_control主题=bsimplexcalenderHeightSpec =自动HEIGHT =0MinCellHeight =63DataStartField =开始DataEndField =结束DataTextField =名DataValueField =IDOnBeforeEventRender = calender_control_BeforeEventRender/＆GT;
                ＆LT;输入=服务器ID =txt_headernotes占位符=注意事项/＆GT;
                ＆LT;输入=服务器ID =txt_displayinformation/＆GT;
            ＆LT; / DIV＆GT;            ＆LT; ASP：面板ID =Panel1的=服务器背景色=黑＆GT;＆LT; / ASP：面板＆gt;       ＆LT; / DIV＆GT;
 

是我的定位正确，请问如何在右手边面板的宽度140px

编辑：我的codePEN WWW codepen.io /匿名/笔/ snJAc pLoory感谢

解决方案

 ＆LT; D​​IV ID =持有＆GT;
宽度：500像素;保证金：0汽车;＆LT; D​​IV ID =左＆GT;
高度：500像素;
宽度：100像素;＆LT; / DIV＆GT;＆LT; D​​IV ID =middleHold＆GT;
浮动：左;＆LT; D​​IV ID =middle1＆GT;
高度：250像素;
宽度：300像素;
＆LT; / DIV＆GT;＆LT; D​​IV ID =middle2＆GT;
高度：50像素;
宽度：300像素;
＆LT; / DIV＆GT;＆LT; D​​IV ID =middle3＆GT;
高度：200像素;
宽度：300像素;
＆LT; / DIV＆GT;＆LT; / DIV＆GT; ＆LT;！ - 结束#middleHold  - ＆GT;＆LT; D​​IV ID =右＆GT;
宽度：100像素;
高度：500像素;
浮动：左;
＆LT; / DIV＆GT;＆LT; / DIV＆GT; ＆LT;！ - 结束#hold  - ＆GT;
 

继承人的ID和刚才添加的CSS给他们。

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.

This is what I am trying to achieve:

The left hand side 3 calender controls on top of eachother which I have managed to achieve.

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.

Here is my 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;
}

This is the 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

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

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

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