Как сделать этот макет так, чтобы текстовая область не была нажата на следующую строку?

Question

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

Вместо этого текстовая область переносится на новую строку. Как сделать область текста совпадающей с верхней частью изображения?

<div class="image"></div> 
<textarea class="textarea"></textarea> 

.image { 
    position: relative; 
    display: inline-block; 
    width: 50px; 
    height: 70px; 
    border: 1px solid #000; 
} 

.textarea { 
    height: 150px; 

    margin-left: 60px; 
    width: -moz-calc(100% - 60px); 
    width: -webkit-calc(100% - 60px); 
    width: -o-calc(100% - 60px); 
    width: calc(100% - 60px); 
} 

Answer 1

Проблема заключается в том, что вы не приходилось пробельных. Когда вы делаете элемент inline или inline-block, он течет, как будто это текст. Другими словами, будет отображаться пробел между элементами. Вы добавили буфер 10px, но 10px недостаточно, чтобы оставить место для пробелов. У вас есть два варианта:

1. Уменьшите ширину текстовой области. Вы, возможно, придется поэкспериментировать со значением немного, но в конце концов, он будет идти по той же линии

2. Оставьте никаких пробелов между элементами, а именно:

   <div class="image"></div><textarea class="textarea"></textarea> 
   

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

Ознакомьтесь со следующим jsfiddle: http://jsfiddle.net/7fzjadep/. Все, что я сделал, это удалить границу и вычесть 100px вместо 60px из ширины. Несмотря на то, что говорят другие, необязательно, чтобы текстовая область также была встроенным блоком.

Answer 2

Они должны быть установлены одновременно встроенный блок (, как указано выше, вам не нужно устанавливать его встраивать, потому что это уже встроенный элемент) и вам нужно избавиться от margin на вашем текстовом поле, но у вас будет пространство между ними, которое составляет около 4 пикселей. Чтобы избавиться от этого пространства, вы захотите обернуть элементы в div и установить div font-size: 0. Также vertical-align: top, чтобы все выглядело красиво.

Here is a fiddle with the code.

<div class="wrap"> 
    <div class="image"></div> 
    <textarea class="textarea"></textarea> 
</div> 

.wrap { 
    line-height: 0; 
    font-size: 0; 
} 

.image { 
    position: relative; 
    display: inline-block; 
    vertical-align: top; 
    width: 50px; 
    height: 70px; 
    border: 1px solid #000; 
} 

.textarea { 
    display: inline-block; 
    vertical-align: top; 
    height: 150px; 
    width: -moz-calc(100% - 60px); 
    width: -webkit-calc(100% - 60px); 
    width: -o-calc(100% - 60px); 
    width: calc(100% - 60px); 
} 

Answer 3

Это то, для чего предназначены поплавки.

.image { 
 
    float: left; 
 
    width: 50px; 
 
    height: 70px; 
 
    border: 1px solid #000; 
 
} 
 

 
.textarea { 
 
    height: 150px; 
 
    display: block; 
 
    margin-left: 60px; 
 
    width: -moz-calc(100% - 60px); 
 
    width: -webkit-calc(100% - 60px); 
 
    width: -o-calc(100% - 60px); 
 
    width: calc(100% - 60px); 
 
}

<div> 
 
<div class="image"></div> 
 
<textarea class="textarea"></textarea> 
 
</div>