как расположить div px из другого div

У меня были проблемы с размещением моего языкового параметра в верхней части моего блога. Он всегда был в другом положении на Windows и Mac. Поэтому я подумал о создании внутреннего и внешнего div. Но у меня проблемы с позицией моего внутреннего div.

Вот результат, который мне нужен: Image 1 Это то, что у меня есть сейчас Изображение 2

Это код, который у меня есть в моем CSS на wordpress:

ОТРЕДАКТИРОВАНО

.outer {
margin: auto;
overflow: visible;
background: white;
margin-left: 925px;
margin-top: -8px;
margin-bottom:-30px;
font-size: 11pt;
color: #E1BDC3;
border: 1px dotted #999999;
border-radius:8px;
width: 255px;
height: 48px;
padding-top: 15px;
padding-left: 10px;
z-index: 1000;
}

.inner {    
position: relative;
left: 160px;
top: -336px;
background: transparent; 
width: 150px;
z-index: 10001;   
}

Блок с рамкой просто имеет <div class="outer"... А внутренний div, выпадающий список, это виджет, который я пытаюсь расположить вверху страницы, я дал виджету "inner" class.

ВОПРОС --> Если я поставлю marging-right: 4px, он начнет отсчет с правой стороны экрана, как мне расположить (например, 4 пикселя) справа от Внешнего блока div? Чтобы он начинал отсчет с пунктирной границы справа (или слева, не важно)

(Я новичок в HTML, поэтому, если вы знаете, как мне помочь, не могли бы вы сказать мне, какой код мне нужен и где?


wordpress html css
person Oihane    schedule 08.02.2017    source источник
comment
Можете ли вы включить свою html-разметку?   -  person Daniel Congrove    schedule 08.02.2017
comment
Я не могу дать много HTML, потому что выпадающее меню, где написано Nederlands, является плагином. Так что нет видимого html. Единственный HTML-код, который можно редактировать, это «div class=outer›Choose language‹/div›», этот код представляет собой раздел «head»   -  person Oihane    schedule 08.02.2017
comment
Щелкните правой кнопкой мыши и выберите «проверить элемент», и вы увидите разметку HTML для плагина. Просто скопируйте/вставьте то, что вы там видите, в свой пост.   -  person smilebomb    schedule 08.02.2017
comment
Я это уже пробовал, не работает, это плагин полиланг. Перейти на англоязычную версию сайта. HTML-код скрыт в плагине. Если я копирую из элемента проверки, я копирую ссылку, доступную для текущей страницы, она меняется в каждом посте и на каждой странице моего блога.   -  person Oihane    schedule 08.02.2017
comment
@Oihane Пожалуйста, посмотрите мое редактирование.   -  person smilebomb    schedule 08.02.2017

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны использовать % для ссылки на позиции на экране. Но вашу проблему можно решить, используя position: relative для ссылки на позицию внутри родительского объекта и перемещая ее с помощью top и left

.outer {
    margin: auto;
    overflow: visible;
    background: white;
    margin-left: 925px;
    margin-top: -8px;
    margin-bottom:-30px;
    font-size: 11pt;
    color: #E1BDC3;
    border: 1px dotted #999999;
    border-radius:8px;
    width: 255px;
    height: 48px;
    padding-top: 15px;
    padding-left: 10px;
    z-index: 1000;
}

.inner {    
    position: relative;
    left: 159px;
    top: -17px;
    background: transparent; 
    width: 100px;     
}
<div class="outer">
  OUTER
  <div class="inner"><select><option>INNER</option></select></div>
</div>

person driconmax    schedule 08.02.2017
comment
что это за вариант выбрать? потому что я могу дать своему плагину только имя класса, я могу ввести только 1 значение, --› классы CSS = .... - person Oihane; 08.02.2017
comment
Это просто пример, чтобы проверить, как это будет выглядеть. Вы можете поместить свой плагин в <div class="inner"></div> - person driconmax; 08.02.2017

arrow_upward
0
arrow_downward

Чтобы ответить на ваш вопрос «как мне расположить (например, 4 пикселя) справа от внешнего div?» вы бы сделали это, сначала определив, как элементы связаны друг с другом. Это определяется свойствами CSS position и display. В зависимости от того, какие значения position и display имеют ваши два элемента, ответ будет различаться.

HTML-разметка, которую вы предоставляете для своего «внешнего» элемента, показывает, что это div. Ваш CSS не определяет позицию для этого элемента, поэтому браузер по умолчанию — static, то есть position:static.

Ваша «внутренняя» стихия для нас загадка. Если это другая div, то это еще одна статическая позиция, с которой мы можем помочь. Если это ul, то это элемент inline, для которого потребуется другой ответ.

Здесь важна ваша разметка.

РЕДАКТИРОВАТЬ

Во-первых, ваше «внешнее» div на самом деле не содержит вашего внутреннего div. Это внешняя разметка div:

<div class="hide_on_mobile outer">Choose language</div>

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

В вашей ситуации вы не в лучшем положении, потому что элемент, который вы хотите разместить, содержится в элементах, которые не относятся к вашему целевому элементу. Поэтому единственный способ расположить их в одном и том же месте на всех размерах экрана — расположить их absolutely и использовать проценты.

Или простой способ, если вы хотите придерживаться одной ширины экрана:

.inner {
    position: relative;         //override by .widget_polylang element
    left: 27px;
    top: -17px;                 //override by .widget_polylang element
    background: transparent;
    width: 100px;               //override by .widget_polylang element
}

Вы увидите, что некоторые из ваших параметров ключ/значение превосходят элемент .widget_polylang. Единственный способ изменить это — отредактировать стили .widget_polylang или добавить повышенную специфичность CSS для .inner.

person smilebomb    schedule 08.02.2017
comment
Я понимаю, о чем вы говорите, но я не уверен, что это внутренний элемент. Не могли бы вы дать мне код того, что вы мне говорите? Я понимаю, о чем вы говорите, но я уверен, что у меня не получится попробовать это самому. Это мой блог --› www.oihanevalbuenaredondo.be. Может быть, он показывает в «проверить элемент», какой элемент является внутренним. - person Oihane; 08.02.2017
comment
Эй, я действительно могу редактировать widget_polylang, я сам добавил его в CSS и забыл о нем, я думаю. Я изменил внутренний CSS, как вы сказали. Однако трудно понять, все ли в порядке с компьютером Mac, у меня Windows, поэтому я не могу проверить. Я отредактировал свой вопрос, теперь вы можете увидеть CSS, который у меня есть. Я не знаю, работает ли это сейчас, хотя - person Oihane; 09.02.2017
comment
Не могли бы вы помочь мне с этим языком? Я отредактировал CSS, как вы сказали, и удалил класс div polylang. Он по-прежнему не отображается прямо на Mac. Я думаю, что единственный способ получить 2 вещи - это расположить внутренний элемент CSS, начиная с границы внешнего элемента CSS, если это возможно. - person Oihane; 09.02.2017
comment
@Oihane Можете ли вы отредактировать свой внешний div так, чтобы он находился внутри div-контейнера? Вот так: <div class="container"> <div class="outer"> Choose Language </div> *the rest of the container code* </div> - person smilebomb; 09.02.2017