Автоматический интервал между встроенными div

Как я могу установить интервал между div на «авто» внутри родительского div с плавной шириной? Возможно ли это только с помощью CSS? Более конкретно: у меня есть родительская ширина div width: 90%. У меня есть 3 встроенных элемента внутри него. Я хочу, чтобы первый элемент касался левой стороны моего родительского div, второй элемент находился посередине, а последний элемент касался правой стороны родительского div.

@edit: я добавляю код:

#news-pane {
    margin: 50px auto;
    width: 90%;
}

#news {
    color: #333;
    width: 300px;;
    vertical-align: top;
    display: inline-block;
}

#news img {
    max-width: 300px;
    height: auto;
}

HTML:

<ul id="news-pane">
    <li id="news">
        <div id="news-header">
           <h1>Title</h1><span>Date</span>
        </div>
        <p><News content</p>
    </li>
    <li id="news">
        <div id="news-header">
           <h1>Title</h1><span>Date</span>
        </div>
        <p><News content</p>
    </li>
    <li id="news">
        <div id="news-header">
           <h1>Title</h1><span>Date</span>
        </div>
        <p><News content</p>
    </li>
</ul>

html spacing
person smogg    schedule 13.08.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать первый элемент float:left, второй элемент с автоматическими полями и третий элемент float:right. Насколько я знаю, элементы должны быть заблокированы, чтобы это работало.

демо: http://jsfiddle.net/2CmSK/

РЕДАКТИРОВАТЬ после просмотра кода: основная проблема заключается в том, что вы используете один и тот же идентификатор для нескольких элементов. Вместо этого вы должны использовать уникальные идентификаторы или классы. HTML-код сейчас недействителен и может вести себя непредсказуемо в разных браузерах.

Вторая проблема заключается в том, что ширина внешнего элемента div указывается в процентах, а ширина элементов новостей — в пикселях. Если окно браузера пользователя имеет ширину менее 1000 пикселей, внешний элемент div будет иметь ширину менее 900 пикселей, и элементы новостей не поместятся внутри.

И между строк я читаю, что вы используете какой-то закрытый/стандартный инструмент для создания новостей, поэтому вы не можете изменить код, и все они должны иметь одинаковую структуру. Если это так, то нет, вы не можете заставить их вести себя по-разному, если они структурно идентичны без использования JavaScript.

person JJJ    schedule 13.08.2011
comment
Точнее, они настроены на встроенный блок. Это новости с изображением, заголовком, датой и текстом. Если я устанавливаю inline, то происходят странные вещи - мой div (ширина которого установлена ​​​​на 300 пикселей) пытается заполнить весь родительский div и берет родительскую ширину... - person smogg; 13.08.2011
comment
Да, я уже добавил код к своему вопросу. Спасибо за Ваш ответ. Есть ли способ достичь того, чего я хочу, без возможности нацеливаться на конкретный раздел новостей? Итак, есть ли какое-то правило, которое я могу установить для каждого div, и оно будет работать? - person smogg; 13.08.2011
comment
Если я правильно понял, вы можете использовать классы для таргетинга на несколько div. Вам нужно показать HTML, который у вас есть. - person JJJ; 13.08.2011
comment
Html добавлен к основному вопросу. Добавление класса, такого как первый, второй и последний, не является решением - person smogg; 13.08.2011
comment
Да, этот код печатается WordPress. У меня, конечно, есть возможность изменить вывод, но я думаю, что JavaScript будет проще сделать, и я останусь с ним. Спасибо за помощь. - person smogg; 13.08.2011