Позиционирование внутреннего div с родительским div - PullRequest
Новая
       1

Позиционирование внутреннего div с родительским div

0 голосов
/ 15 марта 2012

Привет,

Я хочу создать свой собственный блок выбора, используя стили css3.Я использую 1 поле ввода и стрелку вниз для этого. Общее поле выбора находится в 1 внешнем элементе div, а изображение находится во внутреннем теге. Мне нужно расположить эту стрелку вниз вправо к внешнему элементу div, чтобы она выглядела как поле выбора.сталкиваюсь с проблемой выравнивания изображения.Я могу позиционировать этот тег, поместив position: absolute для внутреннего и внешнего тега. Если я не поместил position: absolute в тег внешнего тега div, внутренний тег div не будет правильно расположен (не знаю ... почему?).

Но проблема в том, что, если я это укажу, я должен указать left и top для каждого поля выбора (выровнять вручную). Это сложно сделать, если у меня есть более одного поля выбора в моей форме приложения. (На самом деле, это отвратительно ...) .. Таким образом, внутренний тег div должен быть выровнен по правому краю с внешним тегом без позиционирования внешнего тега div .... Надеюсь, я ясен ... Пожалуйста, помогите из этой проблемы ..

Вот мой пример кода .... 

<!DOCTYPE HTML>
<html>
 <head>
  <style>
   #Outer{ width:155px; height:20px;    *position:absolute;     border:1px solid #336633;   }
   #In{    position:absolute;   right:0px;  height:100%;    width:10px; background:red; top:0px;   }
  </style>
 </head>

 <body>
    <div id="Outer">
       <input type="text"/>
       <div id="In">^</div>
   </div>

 </body>
</html>

1 Ответ

1 голос
/ 15 марта 2012

Следующий код, по-моему, служит вашей цели. 

<head>

    <style>

        #Outer{    

            float:left;    
            width:200px;    
            height:20px;    
            border:1px solid #336633;   
        }

        #In{    
            float:left; 
            height:100%;    
            width:10px; 
            background:red; 
        }

    </style>

</head>

<body>

<div id="Outer">

    <div style="float:left"><input type="text"/></div>

    <div id="In">^</div>

</div>

</body>

В вышеприведенном коде я добавил div для вашего элемента ввода и добавилстиль float как в Outer, так и Inner div.Другое дело, ваша ширина должна быть больше 155 пикселей, я использую его как 200 пикселей.

Пожалуйста, дайте мне знать, работает ли он или вы хотите что-нибудь еще.

...