Как вы поддерживаете ширину горизонтально выровненных вкладок в соответствии с масштабом браузера? - PullRequest
0 голосов
/ 29 июня 2011

У меня есть контейнер div шириной 600px и высотой 30px, который содержит 7 элементов div «день табуляции», а также 2 элемента div «стрелка» меньшего размера Я могу сделать так, чтобы стрелки и вкладки центрировались в div "days_panel", но когда вы увеличиваете изображение, создается свободное пространство. Кто-нибудь знает хорошую технику удержания вкладок по центру и по горизонтали?

Спасибо за вашу помощь!

РЕДАКТИРОВАТЬ: добавил код! извините!

Вот HTML

      <div class ="container">
         <div class ="center">
            <div class="days_panel">
               <div class="left_day_arrow"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="right_day_arrow"></div>
            </div>
         </div>
      </div>

И CSS:

/* -----------------MAIN CONTAINER ----------------------*/
.container{
position: relative;
top: 5px;
margin-left: auto;
margin-right: auto;
width: 1024px;
height :1000px;
}

/* ---------------- CENTER PANEL ---------------- */
.center{
float:left;
margin-left:5px;
width:600px;
height: 100%;
background-color:#C6AEC7;
}

.days_panel{
width:100%;
height:30px;
background-color: white;
}

.day{
float:left;
position:relative;
margin-left: 6px;
width: 11%;
height:100%;
background-color:black;
}

.left_day_arrow{
float:left;
position:relative;
width:5%;
height:100%;
background-color: springgreen;
}

.right_day_arrow{
float:right;
position:relative;
width:5%;
height:100%;
background-color: springgreen;
}

1 Ответ

1 голос
/ 12 июля 2011

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

Если я посмотрю ближе, дневной элемент имеет ширину 11%.11% x 7 = 77%. Теперь стрелки на 5%.5% х 2 = 10%.Это составляет 87%.Поэтому вполне логично, что между ними будут открытые пространства.

Если бы у меня были эти элементы, я бы установил ширину дня в 80 пикселей, а стрелки - в 20 пикселей каждый.Таким образом, он равен 600 пикселей.

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...