Горизонтальные элементы CSS без переноса строки?

Question

Горизонтальные элементы CSS без переноса строки?

0

У меня возникли проблемы с построением в CSS.

Проблема в том, что я не получил зеленый ящик до полного размера желтого контейнера, как показано на изображении. Кроме того, если ярлык длинный, он не должен разрушать структуру.

Я пытался:

<div id="c1">
    <div id="c2">test</div>
    <div id="c3">test</div>        
</div>

Мой css:

#c1 {
    background-color: yellow;
    width: 400px;
    height: 50px;
}

#c2 {
   width: 30px;
   height: 30px;
   margin: 10px;
   background-color: blue;
   display: inline-block; 
}

#c3 {
   background-color: green;
   display: inline-block;  
   height: 30px;
}

Вот JsFiddle, который я сделал: http://jsfiddle.net/confile/32RGz/

confile 17 дек. 2013, в 17:02

Источник

0

это может помочь тебе? jsfiddle.net/32RGz/1
kevpoccs 17 дек. 2013, в 15:16
0

@kevpoccs не помогает, c3 не должен быть фиксированной ширины!
confile 17 дек. 2013, в 19:41

Теги:

html

css

4 ответа

0

Ходит эта работа для тебя?

http://jsfiddle.net/32RGz/2/

Я добавил дополнительные поля и добавил процент ширины:

#c3 {
    display:inline-block;
   background-color: green;
   height: 30px;
    width:85%;
    float:left;
       margin-top: 10px;
       margin-bottom: 10px;
}

man 17 дек. 2013, в 13:57

0

без фиксированной ширины нет варианта
confile 17 дек. 2013, в 19:43

0

http://jsfiddle.net/myajouri/32RGz/9/

#c1 {
    width: 400px;
    display: table;
    box-sizing: border-box;
    border-collapse: collapse;
}
#c2, #c3 {
    display: table-cell;
    height: 30px;
    border: 20px solid yellow;
}
#c2 {
    width: 30px;
    background-color: blue;
}
#c3 {
    background-color: green;
}

myajouri 17 дек. 2013, в 13:52

0

контекст не ясен, но попробуйте добавить ширину к # c3. ширина: 80%, например

andreib 17 дек. 2013, в 12:32

0

нет, это не решение!
confile 17 дек. 2013, в 19:43

Ещё вопросы

это может помочь тебе? jsfiddle.net/32RGz/1
@kevpoccs не помогает, c3 не должен быть фиксированной ширины!
без фиксированной ширины нет варианта

SW4 · Accepted Answer · 2013-12-17T13-40-00.000Z

У вас есть несколько choices-, вы должны либо указать c2 и c3 для определенной ширины, либо использовать модель таблицы CSS.

Пример скрипта

HTML

 <div class='table'>
    <div class='row'>
        <div class='cell'>Something quite long</div>  
        <div class='cell'>
            here is some moreSomething quite long that should exceed the table cell.Something quite long that should exceed the table cell.
        </div>          
    </div>
</div>

CSS

.table{
    margin:0;
    padding:0;
    display:table;
    table-layout: fixed;
    width:100%;
    max-width:100%;
}
.row{
    display:table-row;
}
.cell{
    display:table-cell;
    border:6px solid yellow;
}
.cell:first-child{
    width:30px;
    background:blue;
    overflow:hidden;
}
.cell:last-child{
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    background:green;    
}