Ccsnow Ответов: 3

Почему #stock-rightside не совпадает с #stock-leftside

Я новичок в css, я не понимаю, почему не сделал div той же самой строкой ? Как я могу это сделать ?

[Linkk]

Что я уже пробовал:

<div id="stock-container">
                <div id="stock-leftside">
                    <div id="stock-leftside-top">
                         <div id="left-first-graph">11</div> 
                         <div id="left-middle-graph">222</div>
                         <div id="left-last-graph">333</div>
                    </div>         
                    <div id="stock-leftside-middle">
                        <div id="left-first-graph">444</div>
                        <div id="left-middle-graph">555</div>
                    </div>      
                    <div id="stock-leftside-bot">
                        <div id="left-first-graph">666</div>
                        <div id="left-middle-graph">777</div>
                    </div>       
                </div>
                <div id="stock-rightside">ccc</div>                 
            </div>

3 Ответов

Рейтинг:
25

Richard MacCutchan

Ваш код-это чистый HTML, CSS-это стиль, который связан с определенными элементами HTML. Взгляните на это HTML div тег[^] для получения дополнительной информации. Особенно проверьте атрибуты, которые можно добавить, а также CSS, который можно использовать для изменения цветов и т. д.

Рейтинг:
15

Sandeep Mewara

Попробуйте vertical-align: top свойство CSS.

Посмотрите на эту jFiddle: Edit fiddle - JSFiddle - Code Playground[^]

По умолчанию он не установлен на верх и, следовательно, то, что вы видите.
Чтобы играть и видеть, удалите '#boxContainer-right в css для вертикального выравнивания, и вы получите обратно то, что видите на своем изображении.

Рейтинг:
10

Richard Deeming

У вас есть несколько элементов с одним и тем же id Это недопустимо в HTML - каждый идентификатор в документе должен быть уникальным.

Существует несколько возможных методов для достижения вашего макета. Например, вы можете использовать Flexbox:

#stock-container {
    display: flex;
}
#stock-leftside {
    flex-basis: 25%;
    display: flex;
    flex-direction: column;
}
#stock-rightside {
    flex-grow: 1;
}
#stock-leftside-middle {
    flex-grow: 1;
}
CSS Flexible Box Layout - CSS: Каскадные Таблицы Стилей | MDN[^]
Полное руководство по Flexbox | CSS-Tricks[^]

Демонстрация[^]