Как разместить элемент рядом с другим элементом неопределенной позиции? - PullRequest
Новая
       15

Как разместить элемент рядом с другим элементом неопределенной позиции?

3 голосов
/ 29 мая 2010

Я очень плохо знаком с html / xml / css и стараюсь изо всех сил учить себя. Однако я столкнулся с проблемой, которую поиск Google не смог решить.

Я хотел бы разместить небольшое изображение в фиксированном месте относительно другого элемента (?)

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

<style type="text/css">
 #wrap { 
    width:550px; 
    background-color:#fff; 
    margin:0 auto; 
    padding:0; 
    border-right:1px solid #ccc;         
    border-left:1px solid #ccc; 
}

 #container {
     width: 500px;
      margin:0 auto;
     padding: 25px;
      font-size:.85em;
     background-color: #fff;
 }

и это частичный код, который я пытаюсь отредактировать в положение .xyz справа от "#wrap" 

.xyz {
    position: ???;
    top: 200px;
    right: ???;
    _position: ???;
    _margin: ???;
    _text-align: right;
    z-index: 1337;
}

мой поиск SOF привел меня к мысли, что я должен что-то делать в соответствии с этим - Позиционирование элемента HTML относительно его контейнера с использованием CSS - но я не смог.

Я очень ценю любую помощь, которую вы можете предложить. Надеюсь, я правильно объяснил свою проблему.

Ответы [ 2 ]

0 голосов
/ 27 мая 2013

Мой предпочтительный метод, чаще всего, состоит в том, чтобы поместить все элементы, которые я хочу, рядом друг с другом в контейнер, а затем переместить все оставшееся. Поэтому я собираюсь добавить контейнерный класс (я не большой поклонник идентификаторов - они очень ограничены) к вашим стилям и внесу несколько правок: 

.container  {
  float: left;
  width: 800px;
 }

#wrap { 
  float: left;
  width:550px; 
  background-color:#fff; 
  margin:0 auto; 
  padding:0; 
  border-right:1px solid #ccc;         
  border-left:1px solid #ccc; 
}

#container {
      width: 500px;
      margin:0 auto;
      padding: 25px;
      font-size:.85em;
      background-color: #fff;
}
.xyz {
    float: left;
    margin: 0 0 0 20px;
    width: 200px;
}

Этот код даст вам .wrap div слева и класс .xyz справа с разницей в 20 пикселей между ними внутри класса .container.

Не уверен, что вы хотите сделать со своим #container ID, основываясь на вашем утверждении, что вы хотите расположить .xyz рядом с .wrap.

Если вы действительно хотите расположить #container в одном ряду с другими элементами, поместите его также влево: 

.container  {
    float: left;
    overflow: auto;
    width: 1330px;
}

 #container {
      float: left;
      width: 500px;
      margin:0 0 0 20px;
      padding: 25px;
      font-size:.85em;
      background-color: #fff;
 }

.xyz {
    float: left;
    margin: 0 0 0 20px;
    width: 200px;
}

Каждый идентификатор контейнера и класс xyz теперь имеют левое поле 20 пикселей, а большой контейнер, класс, шире суммы всех элементов div.

Это метод, который снова и снова работал для меня, создавая статические сайты и дочерние темы WordPress (в основном на основе инфраструктуры Genesis), так как я начал писать правильную разметку в 2007 году.

0 голосов
/ 29 мая 2010

Если вы хотите .xyz внутри #wrap, но с правой стороны, выполнение float:right; на вашем .xyz элементе даст то, что вы хотите.

EDIT: попробуйте что-то вроде этого: 

<div class="wrap">
     <div class="shuffle"><my shuffle img></div>
     ......Other stuff......
</div>

тогда css мудрый: 

.wrap{position:relative;overflow:visible;}
.shuffle{position:absolute;right:100px;}
...