Позиция относительная не репсонирует

-1

Ну, у меня есть эта позиция с позицией: относительная; А затем, конечно, используя верхнюю, левую, нижнюю и правую позиции. Ну да, я делаю это все время, иду на консоль, и меняю его вручную, а затем помещаю в фактический файл css. Ну, я люблю это делать, но вот MAJOR. Он полностью не реагирует на изменения размера. Позвольте мне показать вам быструю демонстрацию.Позиция относительная не репсонирует

Вы можете увидеть первую картину, то значки, которые, как удаления темы, редактировать и т.д .. все хорошо, но как только вы увеличиваете, вы можете увидеть на втором изображении , это совершенно беспорядочно .. Ну вот мой весь код для этой страницы. Я просто realllllyyy хочу, чтобы я мог сделать материал repsonsive легко. Позиция: относительная легко, но это даст вам доцент repsonsiveness unfourtunately :(

Минимальная CSS:

span.icon_share_topic { 
    position: relative; 
    /* left: 1422px; */ 
    /* top: 1048px; */ 
    margin-left: 60%; 
} 
span.icon_flag_topic { 
    position: relative; 
    left: 990px; 
} 
span.edit_topic_button { 
    position: relative; 
    right: -1087px; 
    bottom: 8px; 
} 
span.bookmark_topic_button { 
    position: relative; 
    right: -958px; 
} 
span.replies_num_container { 
    font-size: 12px; 
    position: relative; 
    left: 929px; 
} 
ng-md-icon.ng-scope.icon_reply_topic { 
    top: -9px; 
    position: relative; 
    right: 2px; 
} 
button.md-icon-button.backward.md-button.ng-scope.md-ink-ripple { 
    position: relative; 
    left: 400px; 
} 
span.delete_topic_button { 
    position: relative; 
    left: 1050px; 
    bottom: 8px; 
}

Минимальный HTML:

<div class="topic-buttons"> 
     <div class="topic-voting"> 
      <span class="vote-counting"> 
       {{countVote}} <span ng-if="currentAuthGet==null;"> Vote </span> 
      </span> 
      <span ng-if="currentAuthGet!=null;"> 
       <div class="vote-icons"> 
        <md-button class="md-icon-button" aria-label="Custom Icon Button" ng-click="upVote();"> 
         <ng-md-icon icon="thumb_up" id="upVoteIcon" class="thumb-icon" size="20"></ng-md-icon> 
        </md-button> 
        <md-button class="md-icon-button" aria-label="Custom Icon Button" ng-click="downVote();"> 
         <ng-md-icon icon="thumb_down" id="downVoteIcon" class="thumb-icon" size="20"></ng-md-icon> 
        </md-button> 
       </div> 
      </span> 
     </div> 
     <span ng-if="deleteTopicPriv();">   
      <span class="delete_topic_button"> 
       <md-button class="md-icon-button"> 
         <md-button class="md-icon-button animation-target" ng-click="deleteTopic()"> 
          <md-tooltip md-direction="top"> 
           Delete 
          </md-tooltip> 
          <ng-md-icon icon="delete" style="fill: #ff6400;" size="20"></ng-md-icon> 
         </md-button> 
       </md-button> 
      </span> 
     </span> 
     <span ng-if="editTopicPriv();">   
      <span class="edit_topic_button"> 
       <md-button class="md-icon-button"> 
         <md-button class="md-icon-button animation-target" ng-click="editTopic($event)"> 
          <md-tooltip md-direction="top"> 
           Edit 
          </md-tooltip> 
          <ng-md-icon icon="edit" style="fill: #ff6400;" size="20"></ng-md-icon> 
         </md-button> 
       </md-button> 
      </span> 
     </span> 
     <span ng-if="currentAuthGet!=null;">   
      <span class="bookmark_topic_button"> 
       <md-button class="md-icon-button"> 
         <md-tooltip md-direction="top"> 
          Bookmark 
         </md-tooltip> 
         <span ng-if="bookMarkToggleTopic == true" ng-click="bookmarkClickOutlineTopic();"> 
          <ng-md-icon icon="bookmark_outline" style="fill: #ff6400;" size="20"></ng-md-icon> 
         </span> 
         <span ng-if="bookMarkToggleTopic == false" ng-click="bookmarkClickNonOutlineTopic();"> 
          <ng-md-icon icon="bookmark" style="fill: #009688;" size="20"></ng-md-icon> 
         </span> 
       </md-button> 
      </span> 
     </span> 
     <span ng-if="flagSee();"> 
      <span class="icon_flag_topic"> 
        <md-button class="md-icon-button" ng-click=""> 
         <md-tooltip md-direction="top"> 
          Flag 
         </md-tooltip> 
         <ng-md-icon icon="flag" style="fill: #ff6400;" size="20"></ng-md-icon> 
        </md-button> 
      </span> 

     </span> 
     <span class="icon_share_topic"> 
     <md-menu> 
      <md-button class="md-icon-button" ng-click="openShareMenu($mdOpenMenu, $event)"> 
       <md-tooltip md-direction="top"> 
        Share 
       </md-tooltip> 
       <ng-md-icon icon="share" style="fill: #ff6400;" size="20"></ng-md-icon> 
      </md-button> 
      <md-menu-content width="4"> 
       <md-menu-item> 
        <md-button socialshare socialshare-provider="facebook" socialshare-text="Look at my post! Here : " socialshare-hashtags="angularjs, ng-forum, replies , programming" socialshare-url="{{urlSHARINGCURRENT}}"> 
         <ng-md-icon icon="facebook-box" style="fill: #3b5998" size="20"></ng-md-icon> 
         Facebook 
        </md-button> 
       </md-menu-item> 
       <md-menu-item> 
        <md-button socialshare socialshare-provider="twitter" socialshare-text="Look at my post! Here :" socialshare-hashtags="angularjs, ng-forum, replies , programming" socialshare-url="{{urlSHARINGCURRENT}}"> 
         <ng-md-icon icon="twitter" style="fill: #0084b4" size="20"></ng-md-icon> 
         Twitter 
        </md-button> 
       </md-menu-item> 
       <md-menu-item> 
        <md-button socialshare socialshare-provider="linkedin" socialshare-text="Ng-Forum Post" socialshare-description=" Look at my post! Here : {{urlSHARINGCURRENT}} " socialshare-source="angularjs, ng-forum, replies , programming" socialshare-url="{{urlSHARINGCURRENT}}"> 
         <ng-md-icon icon="linkedin-box" style="fill: #007bb5" size="20"></ng-md-icon> 
         Linkedin 
        </md-button> 
       </md-menu-item> 
       <md-menu-item> 
        <md-button socialshare socialshare-provider="google" socialshare-url="{{urlSHARINGCURRENT}}"> 
         <ng-md-icon icon="google-plus-box" style="fill: #d34836" size="20"></ng-md-icon> 
         Google+ 
        </md-button> 
       </md-menu-item> 
      </md-menu-content> 
     </md-menu> 
     </span> 
     <span ng-if="currentAuthGet!=null;">  
      <md-button class="md-raised md-accent" ng-click="replyTopic($event)"> 
       <ng-md-icon icon="reply" style="fill: #0affcf;" size="20" class="icon_reply_topic"></ng-md-icon> 
       Reply 
      </md-button> 
     </span> 
     <span ng-if="currentAuthGet==null;"> 
      <md-button class="md-raised md-accent" ng-click="notAuthReplyTopic()"> 
       <ng-md-icon icon="reply" style="fill: #0affcf;" size="20" class="icon_reply_topic"></ng-md-icon> 
       Reply 
      </md-button> 
     </span> 
    </div>

Если вы, ребята, хотите больше, чем просто tabove Пожалуйста, скажите так, помощь будет принята с благодарностью! Btw im работает над этим here. Было бы здорово, если мы сможем здесь разобраться!

По словам Джеймса Howell я сделал это для HTML:

<span ng-if="flagSee();" class="container_flag_icon"> 
      <span class="icon_flag_topic"> 
        <md-button class="md-icon-button" ng-click=""> 
         <md-tooltip md-direction="top"> 
          Flag 
         </md-tooltip> 
         <ng-md-icon icon="flag" style="fill: #ff6400;" size="20"></ng-md-icon> 
        </md-button> 
      </span> 

     </span>

А потом это для CSS

span.container_flag_icon.ng-scope { 
    position: relative; 
} 
span.icon_flag_topic { 
    position: absolute; 
    left: 976px; 
}

Но когда я ее увеличить еще messus вверх, как обычно .. -_-

источник

2016-06-12 amanuel2

Позиционирование - это ** очень ** плохой способ выкладки веб-страниц. Он чрезвычайно негибкий, и есть намного лучшие и более гибкие варианты. Проверьте [** LearnLayout.com **] (http://learnlayout.com/) –

Как и @Paulie_D, вы должны, вероятно, использовать проценты, контейнеры на уровне блоков и т. Д., Чтобы получить отзывчивый, неразрывный веб-сайт. Или вы можете использовать фреймворк, например [bootstrap] (http://getbootstrap.com/). –

Я не использую Bootstrap @WilliamBrochmann, я использую угловой материал и дизайн материала lite на данный момент ... im not in to bootstrap. – amanuel2

Сначала удалите все относительные утверждения. Затем вам нужны некоторые продвинутые стили Flexbox. С помощью flex-wrap: wrap вы можете удерживать вещи от падения экрана слева, так как это позволит контенту быть многострочным. Используя justify-content: flex-end вы можете выровнять все красиво вправо, как вы пробовали с относительным позиционированием, чтобы разместить большие экраны.

Удачи вам в приятном проекте.

источник

2016-06-12 23:17:41 JoostS

PS. У меня был доступ к среде Cloud9. В противном случае я бы никогда не понял этого. – JoostS

Я пробовал смотреть в материал flexbox .... но даже когда я смотрю на него, он доставляет помощь вообще ... Например, экран загрузки отключен, когда вы обновляете браузер. Мне нужно понять, как это сделать , чтобы применять его повсюду. Проект Btw находится здесь: https://github.com/amanuel2/ng-forum – amanuel2

Вы должны полностью переделать свой макет. Быстрое исправление для сайта, который полностью построить так, как вы описываете добавить видовой экран с фиксированной шириной, чтобы удалить «отзывчивость»:

<meta name="viewport" content="width=1200">

PS. Вы можете заменить 1200 любой шириной, при которой все будет выглядеть нормально.

источник

2016-06-12 21:28:34 JoostS

изменил его с 1200 на 100000 без изменений, что так всегда lol – amanuel2

Пройдите тест на мобильном устройстве или с помощью эмулятор мобильного устройства в хроме (нажмите F12 и выберите маленький значок мобильного устройства). – JoostS

Я настоятельно рекомендую вам следовать этому подходу. Это поможет вам пока и не требует от вас понимания каких-либо «продвинутых» CSS. Когда ваш MVP закончен, оцените его и только улучшите, если это все еще требуется. Не переучивайте его прямо сейчас. – JoostS

При использовании:

position: relative

Вы позиционирования элемента относительно его родителя. Поэтому, если позиция этого родительского элемента изменяется (например, с помощью изменения размера браузера), то и элементы будут расположены таким образом.

Я бы рекомендовал обернуть элементы, которые вы хотите разместить в содержащем элементе, таком как div, и дать этому относительное позиционирование элемента, когда дочерние элементы получат абсолютное позиционирование. Например:

<div class="parent"> 
    <div class="child"></div> 
</div> 

.parent{ 
    position:relative; 
} 

.child{ 
    position:absolute; 
    right:0px; 
}

источник

2016-06-12 21:32:38

+1 Хорошее предложение, но это может усложнить ситуацию. Следуя структуре компоновки, такой как Twitter Bootstrap, кажется, это лучший подход, чем абсолютное позиционирование. – JoostS

Huh .. я никогда не думал об этом .. но im preety уверен, что я уже делал это в прошлом коде? вы были бы так добры, чтобы помочь мне [здесь] (https://ide.c9.io/amanuel2/ng-fourm)? – amanuel2

Джеймс, ваш доцент, похоже, работает ... Я отредактировал свой вопрос, чтобы показать вам, что это доцентная работа по какой-то причине:/ – amanuel2

Позиция относительная не репсонирует

ответ

Смежные вопросы