форматирование блоков с использованием inline-block

Question

форматирование блоков с использованием inline-block

0

Im пытается форматировать 2 блока с различной длиной, используя встроенный блок, но блок-1 выравнивается с длиной блока-2. Мне нужно сохранить длину блока-1 до высоты 100 пикселей

jsfiddle:

http://jsfiddle.net/CGHZ5/5/

HTML:

<div id="id1">
    <div id="id1-test">
    </div>
</div>
<div id="id2"></div>

CSS

#id1-test{
    background-color:red;
    float:right;
    height:15px;
    width:10px;
}

#id1{
    background-color:blue;
    display:inline-block;

    height:100px;
    width:200px;
}
#id2{
    background-color:green;
    display:inline-block;

    height:200px;
    width:300px;
}

user1050619 30 дек. 2013, в 23:56

Источник

0

не уверен, что я понимаю, что вы спрашиваете. Что вы сохраняете, ширина или высота?
Goose 30 дек. 2013, в 22:11
0

Что такое «длина блока» точно? его ширина?
c-smile 30 дек. 2013, в 22:17

Теги:

html

css

2 ответа

Ещё вопросы

не уверен, что я понимаю, что вы спрашиваете. Что вы сохраняете, ширина или высота?
Что такое «длина блока» точно? его ширина?

Alex Shilman · Answer 1 · 2013-12-30T20-07-00.000Z

Используйте float вместо отображения: встроенный блок

Mussser · Answer 2 · 2013-12-30T19-18-00.000Z

Измените свой CSS следующим образом:

    #id1-test{
    background-color:red;
    float:right;
    height:15px;
    width:10px;
}

#id1{
    background-color:blue;
    display:block;
    float: left;
    height:100px;
    width:200px;
}
#id2{
    background-color:green;
    display:block;

    height:200px;
    width:300px;
    float: left;
}

Это делает именно то, что вы хотите в своей скрипке.