Два элемента div с переносом текста на одной строке

Question

Простая проблема - как заставить эти два элемента div разделить одну и ту же строку:

<div style="width: 200px; padding: 0; background-color: #f00; float: left; display: inline; ">Lorem ipsum dolor sit</div>
<div style="margin-left: 200px; padding: 0; background-color: #0f0; float: right; display: inline; ">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis interdum leo nec purus eleifend ut laoreet metus varius. Praesent lobortis risus sem. Duis gravida risus convallis purus dapibus fermentum. Nulla nec arcu pellentesque justo hendrerit pulvinar id ac velit. Nulla cursus volutpat risus, id volutpat metus tempus eget. Morbi rhoncus, diam sed vestibulum elementum, odio nulla faucibus ligula, ut dapibus lorem nunc vitae purus. Nam commodo iaculis ultricies. Etiam in velit dolor, vel convallis tellus. Aliquam tincidunt, erat ac dictum varius, sapien mi faucibus est, sit amet venenatis nisl massa non turpis. Donec eget libero mauris. Cras ac magna est, id hendrerit est.</div>

РЕДАКТИРОВАТЬ: Кроме того, мне нужен второй (правый) элемент div для заполнения оставшегося пространства, поэтому установка ширины выигралане работает в моем случае.Кроме того, мне нужно, чтобы правый div отображался в виде блока, чтобы при его переносе он начинался с начала первой строки в правом div («Cum sociis ...»).

Спасибозаранее.

Answer 1

Сделайте так, чтобы они оба плавали влево, вы также можете попробовать поместить поплавок прямо над поплавком: влево.

Если это не сработает, попробуйте наложить ширину на второе деление.

Если это не сработает, пришлите нам свою страницу, что-то еще не так.

---

РЕДАКТИРОВАТЬ - это альтернатива с использованием абсолютного позиционирования

<div style="width: 200px; padding: 0; background-color: #f00; position:absolute;">Lorem ipsum dolor sit</div>
<div style="margin-left: 200px; padding: 0; background-color: #0f0;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis interdum leo nec purus eleifend ut laoreet metus varius. Praesent lobortis risus sem. Duis gravida risus convallis purus dapibus fermentum. Nulla nec arcu pellentesque justo hendrerit pulvinar id ac velit. Nulla cursus volutpat risus, id volutpat metus tempus eget. Morbi rhoncus, diam sed vestibulum elementum, odio nulla faucibus ligula, ut dapibus lorem nunc vitae purus. Nam commodo iaculis ultricies. Etiam in velit dolor, vel convallis tellus. Aliquam tincidunt, erat ac dictum varius, sapien mi faucibus est, sit amet venenatis nisl massa non turpis. Donec eget libero mauris. Cras ac magna est, id hendrerit est.</div>

Answer 2

Бросьте float:right; и в секунду display:inline;:

<div style="width: 200px; padding: 0; background-color: #f00; float: left; display: inline; ">Lorem ipsum dolor sit</div>
<div style="margin-left: 200px; padding: 0; background-color: #0f0;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis interdum leo nec purus eleifend ut laoreet metus varius. Praesent lobortis risus sem. Duis gravida risus convallis purus dapibus fermentum. Nulla nec arcu pellentesque justo hendrerit pulvinar id ac velit. Nulla cursus volutpat risus, id volutpat metus tempus eget. Morbi rhoncus, diam sed vestibulum elementum, odio nulla faucibus ligula, ut dapibus lorem nunc vitae purus. Nam commodo iaculis ultricies. Etiam in velit dolor, vel convallis tellus. Aliquam tincidunt, erat ac dictum varius, sapien mi faucibus est, sit amet venenatis nisl massa non turpis. Donec eget libero mauris. Cras ac magna est, id hendrerit est.</div>