Гибкий HTML-макет с выравниванием

Question

Гибкий HTML-макет с выравниванием

0

У меня есть структура вроде:

<style>
#main{
   max-width: 500px;
   margin: 0 auto;
   overflow: hidden;
   border: 1px solid red;
}
#container{
    margin-right: -50px;
}
.block{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid grey;
    margin-right: 30px;
}
</style>
<div id="main">
    <div id="container">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>

Если у меня широкая ширина, это выглядит как http://i.stack.imgur.com/3I1yM.png Все в порядке.

Но если я использую узкие, это отстой, мне нужно, чтобы внутренние блоки выравнивались так, чтобы центрировать это

http://i.stack.imgur.com/5GXMJ.png

user3049447 29 нояб. 2013, в 15:17

Источник

1

Я создал скрипку: jsfiddle.net/ALR8P Но я не понимаю ваш вопрос
user2896540 29 нояб. 2013, в 14:03
0

Когда вы используете узкие блоки ширины палочки слева, но мне нужно, чтобы они были выровнены по центру, как i.stack.imgur.com/5GXMJ.png
user3049447 29 нояб. 2013, в 14:07
0

Хорошо я понял.
user2896540 29 нояб. 2013, в 14:08

Показать ещё 1 комментарий

Теги:

html

css

2 ответа

Ещё вопросы

Я создал скрипку: jsfiddle.net/ALR8P Но я не понимаю ваш вопрос
Когда вы используете узкие блоки ширины палочки слева, но мне нужно, чтобы они были выровнены по центру, как i.stack.imgur.com/5GXMJ.png

DaniP · Answer 1 · 2013-11-29T13-09-00.000Z

Привет, что вам нужно, это свойство text-align:center:

#container{
  margin-right: -50px;
  text-align:center;
}

Демо-версия http://jsfiddle.net/u5HHc/

Да, но последний блок тоже будет в центре. это не так i.stack.imgur.com/5GXMJ.png
Тогда вам может понадобиться Jquery или Js

arieljuod · Answer 2 · 2013-11-29T13-42-00.000Z

Как насчет этого?

http://jsfiddle.net/ALR8P/3/

Удалите поле из блоков, выравнивание текста и выравнивания текста и добавьте интервал слов, если вы хотите, чтобы какое-то фиксированное пространство для ваших блоков в последней строке.

#container {
  letter-spacing: 10px; //word-spacing: 10px; //to space blocks on last row
  text-align: justify; //to align everything to the borders on the first lines
  padding: 0px 10px; //to separate the blocks from the borders a little
}

.block {
  margin-right: 0px;
}

Он выглядит неправильно, когда ширина слишком мала, и только один блок подходит для каждой строки, но, возможно, вам нужен какой-то медиа-запрос, чтобы ваш css реагировал на исправление этого в этом специальном случае.

РЕДАКТИРОВАТЬ: интервал между буквами работает лучше, чем кроссбраузер http://jsfiddle.net/ALR8P/5/, вам может понадобиться интервал между буквами: 30 пикселей; так как ваша маржа составляла 30px

Бедный; Все элементы .block во втором ряду отображаются неправильно.
если вы установите интервал между словами 10 пикселей , они будут выглядеть правильно. jsfiddle.net/ALR8P/4 - это комментарий, который я помещаю в эту строку CSS
он также работает с межбуквенным интервалом: 10 пикселей, по крайней мере, в Opera