Принудительное изображение в той же строке, что и столбец текста

Question

Я не уверен, что я здесь делаю неправильно. Я пытаюсь заставить изображение быть в той же строке, что и несколько столбцов текста, но он продолжает смещаться вниз, как на этом изображении: http://imgur.com/Hs43rXF. Левое изображение - это то, что я хочу, чтобы он выглядел, но я получаю правильный образ.

Я уже пробовал показывать: встроенный и плавающий, но не работает. Это мой код:

.page { 
margin-top:50px; 
padding-left:50px; 
padding-right:50px; 
position:relative; 
width:1000px; 
height:450px; 
} 
.leftcolumn { 
margin-top:50px; 
margin-left:0px; 
width: 250px; 
} 
.middlecolumn { 
margin-left:300px; 
margin-right:320px; 
margin-top:50px; 
float:left; 
display:inline; 
} 
.verticalimage { 
margin-right:0; 
margin-top:0; 
float:right; 
display:inline; 
vertical-align:middle; 
} 

<div class="page"> 
    <div class="leftcolumn">text <br> text <br> text</div> 

    <div class="middlecolumn">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lorem velit. Nullam et metus eget nunc egestas laoreet et quis ligula. Vivamus lobortis sodales pulvinar. Nunc malesuada pretium ornare. Aliquam ut erat at magna pellentesque elementum. Fusce facilisis lorem et tortor euismod bibendum.</div> 

    <img class="rightverticalimage" src="picture1.png"/> 

</div> 

Спасибо.

Answer 1

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

CSS

.page { 
margin:5%; 
width:100%; 
height:450px; 
} 


div { 
width:25%; 
margin-left:3%; 
float:left; 
background-color:red;} 

Я сделал BG красный просто так что вы можете увидеть, где DIV начинается и останавливается

HTML

<div class="page"> 

    <div>text <br /> text <br /> text</div> 

    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lorem velit. Nullam 

et metus eget nunc egestas laoreet et quis ligula. Vivamus lobortis sodales pulvinar. Nunc 

malesuada pretium ornare. Aliquam ut erat at magna pellentesque elementum. Fusce facilisis lorem 

et tortor euismod bibendum.</div> 

<div> 
    <img class="rightverticalimage" src="picture1.png"/> 
</div> 

</div> 

Поместите IMG в DIV, чтобы помочь контролировать лучше.

Id также скачивают FIREBUG на Firefox, потому что это помогает в этом.

Answer 2

Вы смешиваете здесь несколько различных методов. Во-первых, как вы могли заметить с левой колонкой, если вы делаете div-дисплей: inline, он не будет удерживать свою ширину. Это связано с тем, что для рендеринга с шириной или полями элемент должен быть блочным уровнем (по умолчанию это div). Кроме того, установка левого поля на средней колонке с левым div уже там будет устанавливать левую сторону на 550 пикселей в контейнере (250 для левой колонки и еще 300 для левого поля), поля и ширина являются кумулятивными.

так, то два способа сделать это является (я оставил ваши дополнительные поля для краткости):

1. Использования поплавков:

   .leftcolumn 
   { 
       width: 250px; 
       float:left; 
   } 
   
   .middlecolumn 
   { 
       width: 250px; 
       float:left; 
   } 
   

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

2. Использование дисплея: встроенный блок

   .leftcolumn 
   { 
       display: inline-block; 
       width: 250px; 
   } 
   
   .middlecolumn 
   { 
       display: inline-block; 
       width: 250px; 
   } 
   

   Это установит дивы как встроенный блок позволяет устанавливать ширину на них, но делает их как встроенный элемент. Преимущество этого заключается в том, что элемент .page автоматически получит высоту div. Тем не менее, он прерывается, т. Е., Поскольку это не приводит к правильному отображению элементов встроенного блока.

Я намеренно оставлена ​​добавляя ширину на элемент изображения, так как он будет таким же, напротив обоих подходов (просто установить дисплей: блок и плавать, или установить дисплей: встроенный блок)