позиционирование пролета под изображением с помощью css

Question

Я хочу, чтобы byline появился прямо под изображением.

Я пытаюсь использовать свойства , left и т. Д. В отношении свойства relative, но пролет перемещается влево от изображения.

Какая ошибка в моем коде?

<section id="manchanabele"> 
    <img id="club" alt="club" src="images/club.jpg"> 
    <p id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. nisi ut aliquip ex ea commodo consequat. 
     <span id="byline">by: Lorem Ipsum</span> 
    </p>  
</section> 

section#manchanabele { 
    background: #C8C8C8; 
} 

#club { 
    float: right; 
    width: 75px; 
    height: 75px; 
} 

p#lorem { 
    background: #A0A0A0; 
} 

span#byline { 
    position: relative; 
    float: right; 
} 

Answer 1

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

---

Здесь, в приведенном ниже коде, я объясню вам, связанные с выше изображения, черная окантовка контейнер .wrap, тот, который имеет зеленую границу, является абзацем, который равен p, красный - это контейнер, который вы плаваете вправо, который равен .right_float, а вложенные элементы внутри красного элемента - это ваши img и span соответственно.

Например

<div class="wrap"> 
    <p>Hello</p> 
    <div class="right_float"> 
     <img src="#" /> 
     <span>Hello</span> 
    </div> 
</div> 

.wrap { 
    overflow: hidden; /* Clears float */ 
} 

.wrap p { 
    float: left; 
    width: /*Some fixed width*/ 
} 

.wrap .right_float { 
    float: right; 
    width: /* Some fixed width */ 
} 

.wrap .right_float span { 
    display: block; 
} 

---

Обратите внимание, если вы не заботитесь о старых версиях, особенно IE, я бы порекомендовал вам использовать самостоятельно клирингового родительский класс

.clear:after { 
    clear: both; 
    display: table; 
    content: ""; 
} 

Теперь вы можете вызвать вышеуказанный класс в своем родительском элементе, где хранятся плавающие элементы, и вам не нужно использовать overflow: hidden;

Answer 2

Попробуйте очистить: both; после изображения.

Подобно

<section id="manchanabele"> 
     <img id="club" alt="club" src="images/club.jpg"> 
     <div style="clear:both;></div> 

     <p id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. nisi ut aliquip ex ea commodo consequat. 
     <span id="byline">by: Lorem Ipsum</span> 
     </p> 

    </section> 

избежать Также плавающих встроенных элементов. Лучше, если вы завернули это изображение с помощью div, а затем поместили div.

Answer 3

Вы можете сохранить линию привязанную к изображению, обернув элементы в контейнер, например DIV.

HTML:

<section id="manchanabele"> 
    <div id="align"> 
     <img id="club" alt="club" src="images/club.jpg"> 
     <span id="byline">by: Lorem Ipsum</span> 
    </div> 
    <p id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. nisi ut aliquip ex ea commodo consequat. 
    </p> 

</section> 

CSS:

section#manchanabele { 
    background: #C8C8C8; 
} 

#align { 
    float:right; 
    width:75px; 
} 

#club { 
    width: 75px; 
    height: 75px; 
} 

p#lorem { 
    background: #A0A0A0; 
} 

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

Answer 4

Используйте эту разметку:

<article> 
    <div class="clearfix"> 
     <img src="http://lorempixel.com/70/70" alt="a random image" class="thumb" > 
     <p>The quick brown fox jumps over all the messy markup and writes a new one.</p> 
    </div> 
    <footer>By The Fox</footer> 
</article> 

Fiddle: http://jsfiddle.net/C5GkH/1/

или, если вам нужно изображение и подписи автора всегда одна под другой держа пустой боковая панель справа следовать советам @Mr.Иностранец