Как добавить несколько элементов друг под друга рядом с изображением?

Question

Im новое для веб-разработки, и я только начал свой первый проект.

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

Это то, что у меня есть

HTML:

<div class="container"> 
    <div class="Main-Heading text-center "> 
    <h1>Albert Einstein 1879-1955</h1> 
    </div> 

    <div class="picture"> 
    <img class="img-rounded img-thumbnail img-responsive" src="http://science-all.com/images/albert-einstein/albert-einstein-04.jpg" name="Albert Einstein" alt="Albert Einstein posing for a picture with his hands crossed"> 
    <blockquote cite="http://www.brainyquote.com/quotes/authors/a/albert_einstein.html"> 
     The important thing is not to stop questioning. Curiosity has its own reason for existing. 
    </blockquote> 
    <p>Albert Einstein was a German-born theoretical physicist.</p> 

    </div> 


</div> 

Это то, что у меня есть

CSS:

.Main-Heading h1 { 
    display: inline-block; 
    color: black; 
    font-size: 70px; 
    font-family: Candal; 


} 
.picture p { 
    float: right; 
    display: inline-block: 


} 
.picture blockquote { 
    float: right; 
    font-family: Pacifico, sans-serif; 
    font-size: 17px; 

} 
.container { 
    background-color: rgb(230, 230, 230); 
} 
.main_text { 

} 

.picture { 
    display: inline-block; 


} 
body { 


} 

Answer 1

Float ваше изображение влево.

Добавьте это в CSS:

.picture img { 
    float: left; 
} 

Не забудьте очистить потом тоже, но положить <div style="clear: both;"></div> после ваших плавающих элементов.

См. this previously asked question, который также может предоставить некоторую полезную информацию.