Плавающие элементы в гибких divs

-1

У меня есть расположение в 3 колонках. Моя проблема заключается в том, что контент во втором <div> заполняется снизу, как вы можете видеть в этом fiddle. Я хотел бы привести его содержимое в верхнюю часть.Плавающие элементы в гибких divs

Ниже приводится соответствующий HTML

<div class="user-info" style="width: 100%;"> 
    <div id="image-container"> 
    <img src="image.jpeg" height="200px" width="200px"> 
    </div> 
    <div id="info"> 
    <div class="info-item"> 
     <div class="info-attribute">tullsy</div> 
    </div> 
    <div class="info-item"> 
     <div class="info-attribute">tullsy</div> 
    </div> 
    <div class="info-item"> 
     <div class="info-attribute">tullsy</div> 
    </div> 
    </div> 
    <div id="button-container"> 
    <input type="button" id="edit_button" value="edit" class="button" onclick="function()"> 
    <br> 
    </div> 
</div>

и CSS

#image-container { 
display: inline-block; 
width: 100; 
} 
#info { 
display: inline-block; 
} 
#button-container { 
display: inline-block; 
float: right; 
padding: 10px; 
}

я могу решить эту проблему путем применения display: flex; для контейнера, однако, кажется, не может плавать элементов внутри контейнера flex ,

Мне удалось добиться того, что я хочу, используя <br>, как вы можете видеть в этом fiddle. Но я хочу достичь того же, не используя <br> s или фиксированную прокладку.

источник

2014-07-09 Tyler Sebastian

Прежде всего, ничего не видно из этой скрипки. все, что я вижу, это сломанное изображение и 3 слова. Во-вторых, избегайте использования встроенных стилей, что делает ваш код нечитаемым и трудным для работы - [зачем использовать CSS] (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Why_use_CSS). Помогла бы очищенная скрипка или изображение желаемого выхода. –

@TilwinJoy обновлено –

жаль о возвращении с тем же, но теперь вы смешиваете встроенные стили и css, что еще хуже, ах, неважно. «Стиль-эквивалент этому, но без заполнения с
s» - я до сих пор не получил эту часть. Мы не можем помочь вам, не понимая, что вы пытаетесь сделать.:/ –

Если я правильно понял, Прежде всего, вам нужно применить height к контейнеру #info (Таким образом, вы можете избежать использования <br> с, чтобы добавить высоту) В противном случае это будет термоусадочная пленка на высоту это ребенок Предметы.

Затем вы можете применить vertical-align:top; для выравнивания inline-block дочерних элементов в нем к вершине без использования <br> сек

Demo

источник

2014-07-09 06:19:45

Плавающие элементы в гибких divs

ответ

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