Asp.net 将一个div放置在另一个div中？

在一个大div中，我有一个搜索框，它基本上是一个div，有文本框、玻璃图像和按钮。要求将此搜索向导垂直放置在div的中间和右侧。此框位于div的左上角。我尝试了不同的方法，但不知道如何设置它。请引导我

谢谢

<div class="Right">
        <div class="header-search" style="position: relative; top: auto; bottom: auto; right: 0 left:100%;
            margin: auto 0 auto auto;">
            <input type="text" class="searchbox" />
            <input type="button" class="searchbutton" value="›" />
        </div>
    </div>


div.Container div.Right 
{
        width:50%;
        float:right ;
        border: 01px dashed green;
        height:95px !important;
        padding:auto 0 auto 200px;
}   

div.header-search
{
    overflow:auto;
    display:inline;
    text-align:right !important;
    border:3px dashed blue;    
    padding:20px 0 auto 50px;

}

div.header-search input.searchbox 
{
    border-bottom-left-radius:5px;
    -webkit-border-bottom-left-radius:5px; 
    -moz-border-bottom-left-radius:5px;


    border-top-left-radius:5px;  
    -webkit-top-left-radius:5px; 
    -moz-left-radius:5px;


     border:2px solid #316200;
     background-color:white;
     height:16px;
     padding:4px;
     padding-left:28px;
     padding-right:10px;
     color:#4a4a4a;
     float:left;
     background:white url(../images/SearchImage.png) 0 50%  no-repeat;


 }

div.header-search input.searchbutton
{

  border-bottom-right-radius:5px;
  -webkit-border-bottom-right-radius:5px; 
  -moz-border-bottom-right-radius:5px;

   border-top-right-radius:5px;  
   -webkit-top-right-radius:5px; 
   -moz-right-radius:5px;

   background:#458A00;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A5D376', endColorstr='#326400'); /* for IE */
   background: -webkit-gradient(linear, left top, left bottom, from(#A5D376), to(#326400)); /* for webkit browsers */
   background: -moz-linear-gradient(top,  #A5D376,  #326400); /* for firefox 3.6+ */  
  width:50px; 
  height:28px;
  color:White;
  font-size:16px;
  font-weight:bold ;
  border:2px solid #316200;
  border-left:none;


}

---

理解元素如何定位的第一步是阅读以下文章：

您在错误的div上使用了position:relative，因为它应该被分配到。Right-而header搜索应该改为“position:absolute；”以及左/右和上/下的值

上面的文章解释得比我所能做的要好得多

也许这是一个很好的起点：

<div class="Right">
        <div class="header-search">
            <input type="text" class="searchbox" />
            <input type="button" class="searchbutton" value="›" />
        </div>
    </div>


div.Container div.Right {
        position: relative;
        width: 50%;
        float: right;
        border: 1px dashed green;
        height: 95px !important;
        padding: auto 0 auto 200px;
}   

div.header-search {
    position: absolute;
    right: 0;
    top: 0;
    overflow: auto;
    display: inline;
    text-align: right !important;
    border: 3px dashed blue;    
    padding: 20px 0 auto 50px;
}

---

理解元素如何定位的第一步是阅读以下文章：

您在错误的div上使用了position:relative，因为它应该被分配到。Right-而header搜索应该改为“position:absolute；”以及左/右和上/下的值

上面的文章解释得比我所能做的要好得多

也许这是一个很好的起点：

<div class="Right">
        <div class="header-search">
            <input type="text" class="searchbox" />
            <input type="button" class="searchbutton" value="›" />
        </div>
    </div>


div.Container div.Right {
        position: relative;
        width: 50%;
        float: right;
        border: 1px dashed green;
        height: 95px !important;
        padding: auto 0 auto 200px;
}   

div.header-search {
    position: absolute;
    right: 0;
    top: 0;
    overflow: auto;
    display: inline;
    text-align: right !important;
    border: 3px dashed blue;    
    padding: 20px 0 auto 50px;
}

---

删除你的div的所有样式，因为这是一个糟糕的做法。接下来，转换.Right和.header搜索的两种样式，如下所示：

div.Right {
    border: 1px dashed green;
    height:95px;
    position: relative;
}   

div.header-search {
    border:1px dashed blue;
    position: absolute;
    top: 30px;
    right: 0;
}

这将完成您正在尝试的任务。没有一种干净、简单的方法来垂直居中，但由于您在outter.Right div上有一个固定的高度，在search元素上有一个固定的高度，因此最好只在inner.header search上使用一个固定的顶部位置

您可以在这个JSFIDLE上看到它的作用：

---

删除你的div的所有样式，因为这是一个糟糕的做法。接下来，转换.Right和.header搜索的两种样式，如下所示：

div.Right {
    border: 1px dashed green;
    height:95px;
    position: relative;
}   

div.header-search {
    border:1px dashed blue;
    position: absolute;
    top: 30px;
    right: 0;
}

这将完成您正在尝试的任务。没有一种干净、简单的方法来垂直居中，但由于您在outter.Right div上有一个固定的高度，在search元素上有一个固定的高度，因此最好只在inner.header search上使用一个固定的顶部位置

您可以在这个JSFIDLE上看到它的作用：

---

谢谢你，杰森。我的外部div没有固定的高度和宽度。这些是%的。请告诉我它会工作吗？或者其他东西应该是圆顶的。所以，右边的div将在高度和宽度上都增加？不会增加，但我不知道它的大小。另外，对于不同的显示大小，我不确定它的高度。在我的示例中，宽度可以自由更改，但高度不会受显示大小的影响，除非您使用媒体查询，即使这样，您也需要具体说明。%在大多数情况下，身高不太合适。谢谢杰森。我的外部div没有固定的高度和宽度。这些是%的。请告诉我它会工作吗？或者其他东西应该是圆顶的。所以，右边的div将在高度和宽度上都增加？不会增加，但我不知道它的大小。另外，对于不同的显示大小，我不确定它的高度。在我的示例中，宽度可以自由更改，但高度不会受显示大小的影响，除非您使用媒体查询，即使这样，您也需要具体说明。%在大多数情况下，“身高”这个词不起作用。