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

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

0 голосов
/ 13 августа 2011

Как я могу установить интервал между div в «auto» внутри 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>

1 Ответ

1 голос
/ 13 августа 2011

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

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

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

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

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

...