定位在另一个DIV一个div？ [英] positioning a div inside another div?
问题描述
在一个大的div我有搜索框，这基本上是一种具有文本框玻璃图像的按钮和一个DIV。要求是在中间和右侧的div位于该搜索向导垂直。这盒即将在左上角内股利。我曾尝试不同的东西，但没有得到如何设置。请指引我。
感谢
＆LT; DIV CLASS =右＆GT;
＆LT; DIV CLASS =标题搜索的风格=的位置是：相对;顶部：自动;底部：自动;右：0左：100％;
保证金：0汽车汽车汽车;＆GT;
＆LT;输入类型=文本级=搜索框/＆GT;
＆LT;输入类型=按钮级=searchbutton值=>/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
div.Container div.Right
{
宽度：50％;
浮动：权利;
边界：01px绿色虚线;
！高度：95px重要;
填充：自动0自动为200px;
}
div.header搜索
{
溢出：汽车;
显示：内联;
文本对齐：权重;
边框：3PX蓝色虚线;
填充：0 20px的汽车50像素;
}
div.header搜索input.searchbox
{
边框左下角半径：5像素;
-webkit-边框左下角半径：5像素;
-moz-边框左下角半径：5像素;
边框左上角半径：5像素;
-webkit-左上半径：5像素;
-moz-左半径：5像素;
边界：2px的固体＃316200;
背景颜色：白色;
高度：16px的;
填充：4PX;
填充左：28px;
填充右：10px的;
颜色：＃4a4a4a;
浮动：左;
背景：白色的url（../图像/ SearchImage.png）0 50％不重复;
}
div.header搜索input.searchbutton
{
下边框右侧半径：5像素;
-webkit-边框右下半径：5像素;
-moz-边框右下半径：5像素;
边框右上角半径：5像素;
-webkit-右上半径：5像素;
-moz-右半径：5像素;
背景：＃458A00;
过滤器：进程id：DXImageTransform.Microsoft.gradient（startColorstr ='＃A5D376，endColorstr ='＃326400'）; / * IE浏览器* /
背景：-webkit-梯度（线性，左上角，左下角，从（＃A5D376），到（＃326400））; / *为WebKit的浏览器* /
背景：-moz-线性渐变（顶部，＃A5D376，＃326400）; / *为Firefox 3.6+ * /
宽度：50像素;
高度：28px;
颜色：白色;
字体大小：16像素;
字体重量：大胆的;
边界：2px的固体＃316200;
左边框：无;
}
了解如何定位元素的第一步是阅读一篇文章像这样的：
CSS-Tricks.com - 相对定位里面绝对定位
正在使用的位置是：相对上的错误 DIV ，它应该被分配到 .Right - 而头搜索应该不是的位置是：绝对的;和值左/右和顶/底
上面的文章介绍了它好得多比我曾经做！
也许这将是一个很好的出发点：
＆LT; DIV CLASS =右＆GT;
＆LT; DIV CLASS =标题搜索＆GT;
＆LT;输入类型=文本级=搜索框/＆GT;
＆LT;输入类型=按钮级=searchbutton值=>/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
div.Container div.Right {
位置：亲属;
宽度：50％;
浮动：权利;
边界：1px的虚线绿色;
！高度：95px重要;
填充：自动0自动为200px;
}
div.header搜索{
位置：绝对的;
右：0;
顶部：0;
溢出：汽车;
显示：内联;
文本对齐：权重;
边框：3PX蓝色虚线;
填充：0 20px的汽车50像素;
}
In a big div I have search box which basically is a div having text box glass image and button. Requirement is to positioned this search wizard vertically in middle and on right side in div. This box is coming on top left inside div. I have tried different things but not getting how to set it. Please guide me.
Thanks
<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;
}
The first step in understanding how positioned elements is reading an article like this one:
CSS-Tricks.com - absolute positioning inside relative positioning
you are using position: relative on the wrong div as it should be assigned to .Right- while header-search should have instead 'position: absolute;' and values for left/right and top/bottom
the article above explains it much better than I could ever do!
Perhaps this would be a good starting point:
<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一个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
