HTML / CSS: расположение элементов с изменением окна - PullRequest
Новая
       30

HTML / CSS: расположение элементов с изменением окна

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

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

enter image description here

enter image description here

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

enter image description here

вместо:

enter image description here

Ответы [ 3 ]

2 голосов
/ 05 марта 2012

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

http://jsfiddle.net/geymU/

<div id="nav">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Address</li>
    <li>Phone</li>
  </ul>
</div>​

CSS 

#nav{
   background:#c1c1c1;
}
#nav ul{
  display:table;
  width:100%;
}
#nav li{
  padding:5px;
  display:table-cell;
  background:#333;
  border:1px solid;
  color:#fff;
}​
2 голосов
/ 02 марта 2012

Не видя реального кода, я бы порекомендовал вам указывать ширину по горизонтали, поля и отступы с относительно единиц. Это будет% или ems, а не пиксели.

Итак, в вашем примере, 

 #element_2 {
     margin-left: 45%;
  }
  #element_3 {
     margin-left: 5%;
  }

С относительными единицами вам придется сделать немного больше проб и ошибок, чтобы элементы располагались так, как вам нужно.

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

На ваших фотографиях это выглядит как backgroundimage (я предполагаю, что это изображение, так как оно не растягивается на всю кнопку) не хватает только 

background-repeat: repeat-x;

Однако то, что я вижу во втором примере, может бытьлегко архивировать, если вы установите первую кнопку на 

    float: left;

, а остальные кнопки на 

    float: right;

Только не забудьте 

    clear: both;

после них,если у вас больше нет элементов, удаленных из потока документов (что и делает float).

...