Проблемы с помещением двух пролетов рядом друг с другом

Question

У меня есть два пролета, которые я хотел бы рядом друг с другом.

<span id = "pic" > 
    <img src="me.jpg" id = "prof"> 
</span> 
<span id = "info"> 
    Lorem ipsum 
</span> 

Мой CSS является:

#pic{ 
    width: 40%; 
    float:left; 
    padding-top:6%; 
    position: fixed; 
    display: inline-block; 
    margin-left: 15%; 
} 
#info{ 
    /*width: 40%;*/ 
    float:right; 
    /*padding-left: 75%;*/ 
    padding-top:16%; 
    color: white; 
    display: inline-block; 
} 

---

Второй span не будет плавать справа от первого span даже с padding-left или margin-left до 75%, если теоретически я должен просто нужно 45%, чтобы получить его на 5% слева от первого пролета.

Когда у меня нет первого пролета как фиксированная позиция (я бы хотел, чтобы изображение оставалось как прокрутки текста), второй прогон появлялся бы вверху первого, а не в сторону, или на дне начиная с правой стороны внизу, где первая строка текста выравнивается в нижней части изображения.

Answer 1

Это должно работать

#pic{ 
    width: 40%; 
    left:15%; 
    padding-top:6%; 
    position: fixed; 
    display: inline-block; 
} 
#info{ 
    /*width: 40%;*/ 
    position:absolute; 
    right: 0px; 
    top: 16%; 
    color: white; 
    display: inline-block; 
} 

попробовать его и дайте мне знать, если это то, что вы хотите

Answer 2

Я предлагаю удалить position: fixed;, так как это не будет работать с устройством, которое похоже на то, что вы пытаетесь достичь. Посмотрите, как это происходит.

Answer 3

Там только места для 20% или 20vw, так что вы можете поместить margin-left/right или padding-left/right вместе в общей сложности только 20%:

#pic{ 
 
    width: 40%; 
 
    float:left; 
 
    padding-top:16%; 
 
    display: inline-block; 
 
    background-color: pink; 
 
} 
 
#info{ 
 
    width: 40%; 
 
    float:right; 
 
    padding-left: 20%; 
 
    padding-top:16%; 
 
    color: white; 
 
    display: inline-block; 
 
    background-color: red; 
 
}

<span id = "pic" > 
 
    <img src="me.jpg" id = "prof"> 
 
</span> 
 
<span id = "info"> 
 
    Lorem ipsum 
 
</span>

Answer 4

Процентная ширина не всегда будет работать, если они не являются co содержащихся в родителе с известной шириной. Попробуйте изменить пролеты к дивы и содержащие их в другой DIV:

<div id="container"> 
    <div id = "pic" > 
     <img src="me.jpg" id = "prof"> 
    </div> 
    <div id="info"> 
     Lorem ipsum 
    </div> 
    <br style="clear:both" /> 
</div> 

CSS:

#container{ 
    width: 100%; 
} 
#pic{ 
    width: 40%; 
    float: left; 
    padding-top: 6%; 
    margin-left: 15%; 
} 
#info{ 
    width: 45% 
    float: left; 
    padding-top: 16%; 
    color: white; 
} 

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

Answer 5

вероятно поздно для ответа, однако, я хотел бы представить технику, которую я придумал, чтобы решать такие проблемы, с которыми я столкнулся в последнее время ...

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

Техника, о которой я думал, это установить границу с помощью divs и видеть пространство, которое они приобретают в div или что бы они ни находились ...

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

Так что это не решение, а метод, чтобы найти решение ... Я надеюсь, что это поможет кому-то.