Как разместить 4 изменяемых размера div в горизонтальном расположении?

Question

Как разместить 4 изменяемых размера div в горизонтальном расположении?

0

Я должен реализовать функцию поиска, которая имеет следующий макет:

[Вход для поиска (отображается при щелчке по значку поиска)] SearchIcon ClearIcon RefreshIcon

Все это часть горизонтальной компоновки.

Я объединяю поиск и значок в директиве (называемой my-search). По причинам, которые я не могу объяснить здесь, ясное и обновление не является частью директивы.

Вот HTML (шаблон), который у меня есть для директивы, включая текст и значок поиска:

<div class="my-search">
    <input class="search"
           type="search"
           placeholder="{{placeholder}}"
           ng-model="model"
           ng-change="onSearchTextChange(model)"
           ng-show="click"               
           ng-init="click=false"
            />
    <div class="circle main-icon" ng-click="click=true">
        <div class="fa fa-search internal-icon"></div>
    </div>

</div>

Вот css:

.my-search {
    float: left;
    position: relative;
    box-shadow: none;
    height: 0;
}
.my-search .search{
    float: left;
    display: inline-block;
    width: 25rem;
    height: 3rem;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
    background-color:transparent ;
    font-size: 1.8rem;
    border-radius: 0;
    position: relative;
}

.my-search .circle{
    width: 3rem;
    height: 3rem;
}
.my-search .main-icon{
    float: right;
    position: relative;
    background-color:transparent ;
    border: 2px solid #018BD3;
    padding-top:5px !important;
    left: -34px;
    transition-delay: 0.5s;
}

.my-search .main-icon .internal-icon{
    position: absolute;
    color:#018BD3;
    width: 3rem;
    margin-top: 1px;
    margin-left: 7px ;
}

Значения поиска и значка выравниваются правильно, но, однако, когда я использую директиву в комбо с ясным и обновляющим, четкие и обновленные значки добавляются справа от ввода текста (в отличие от значка поиска), когда вход видим.

Вот что я имею для получения всех четырех в горизонтальной компоновке:

<div class="container">
    <my-search> model="model" placeholder="placeholder" </my-search>
       <div>
            <div class="fa fa-bell"></div>
       </div>
       <div>
            <div class="fa fa-bars"></div>
       </div>
 </div>

Проблема заключается в том, что вход отображается слева, оба столбца (очистить) и столбцы (обновить) отображаются справа на вкладке в отличие от значка поиска.

.container{
float: right;
  padding-right: 30px;
}

Я думаю, что проблема заключается в том, что, когда размер поиска изменяется, чтобы показать ввод, общее плавающее появляется относительно этого, в отличие от значка поиска. Любая идея, как я могу это исправить?

as3rdaccount 01 июль 2015, в 11:02

Источник

Теги:

html

angularjs

css

angularjs-directive

2 ответа

Ещё вопросы

Meli · Answer 1 · 2015-07-01T08-11-00.000Z

Следующий CSS приводит к тому, что ваш значок поиска перемещается вправо:

.my-search .main-icon{
    float: right;
...}

Если вы удалите значок поиска, появится в его естественном порядке... или положите float прямо на звонок и бары.

Icycool · Answer 2 · 2015-07-01T06-37-00.000Z

Хотя ваш макет немного необычен, я не могу воспроизвести вашу проблему в фрагменте кода. Какой скриншот вы хотели бы нам показать?

Вы не предоставили css для дополнительных 2 значков, поэтому я предполагаю, что они останутся налево.

div {
  padding: 2px;
  border: 1px solid;
}
.div1 {
  float: left;
  width: 100px;
}
.div2 {
  position: absolute;
  width: 39px;
  height: 24px;
}
.div2-wrapper {
  float: right;
  position: relative;
  left: -45px;
}
.wrapper {
  float: left;
}
.div3,
.div4 {
  float: left;
}
.container {
  float: left;
  padding-right: 50px;
}

<br>
<br>
<div class="container">
  <div class="wrapper">
    <div class="div1">div 1</div>
    <div class="div2-wrapper">
      <div class="div2">div 2</div>
    </div>
  </div>
  <div class="div3">div 3</div>
  <div class="div4">div 4</div>
</div>