CSS align 2 divs side by side

Как вы выровняете два div рядом друг с другом, когда у вас есть установленная ширина, а другая должна автоматически использовать оставшуюся часть пространства. Если заданная ширина div не указана в справке, другой div должен изменить размер, чтобы взять все пространство из контейнера div.CSS align 2 divs side by side

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

Вот мой код:

CSS

.sub-row-wrapper { 
    background: #f00; 
    text-align: left; 
    width: auto; 
    position:relative; 
    padding: 12px; 
    margin-bottom: 12px; 
    border-bottom: 1px; 
    border-style: solid; 
    border-color: #ccc; 
} 

.sub-row-left-col { 
    background: #ff0; 
    display:inline-block; 
    width: 25%; 
    text-align: left; 
} 

.sub-row-right-col { 
    background: #f0f; 
    display:inline-block; 
    width: auto; 
}

HTML

<div class="sub-row-wrapper"> 

    <div class="sub-row-left-col"> 
     <p>Left img</p> 
    </div> 

    <div class="sub-row-right-col"> 
     <p>This should be positioned right of 'left img' and should not go underneath the left img</p> 
    </div> 
</div>

У меня есть следующий код

http://jsfiddle.net/fr9zvaj3/

Wha t Я хочу, чтобы первый div был для желтой коробки сидеть слева от фиолетового ящика. Желтая коробка должна быть 25% ширины, а фиолетовая коробка должна использовать все свободное место.

Когда я удалить желтый ящик, фиолетовый ящик должен автоматически идти по всей ширине (как это делает на строке 2)

источник

2014-11-24 el_nariz

Одним из решений является использование display: flex в контейнер и установить width: 100% в фиолетовом DIV:

.sub-row-wrapper { 
 
    background: #f00; 
 
    text-align: left; 
 
    width: auto; 
 
    position: relative; 
 
    padding: 12px; 
 
    margin-bottom: 12px; 
 
    border-bottom: 1px; 
 
    border-style: solid; 
 
    border-color: #ccc; 
 
    display: flex;/*set display to flex*/ 
 
} 
 
.sub-row-left-col { 
 
    background: #ff0; 
 
    display: inline-block; 
 
    width: 25%; 
 
    text-align: left; 
 
} 
 
.sub-row-right-col { 
 
    background: #f0f; 
 
    display: inline-block; 
 
    width: 100%;/*set width to 100%*/ 
 
}

<body> 
 

 
    <div class="sub-row-wrapper"> 
 

 
    <div class="sub-row-left-col"> 
 
     <p>Left img</p> 
 
    </div> 
 

 
    <div class="sub-row-right-col"> 
 
     <div class="post-content"> 
 
     <p>This should be positioned right of 'left img' and should not go underneath the left img</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

 
    <div class="sub-row-wrapper"> 
 

 
    <div class="sub-row-right-col"> 
 
     <div class="post-content"> 
 
     <p>This should be full width when I put enough content in to make it full width</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

 
</body>

Reference

flex

источник

2014-11-24 20:54:19

.sub-row-left-col { 
    background: #ff0; 
    display:inline-block; 
    width: 25%; 
    text-align: left; 
    float: left; 
} 

.sub-row-right-col { 
    background: #f0f; 
    display:inline-block; 
    width: 100%; 
}

должен сделать трюк я верю. float: left; и width:100%

источник

2014-11-24 20:53:11 qrikko

CSS align 2 divs side by side

ответ

Смежные вопросы