позиционирования изображения с два р в сНу

Question

Пожалуйста, смотрите этот код ручку для визуального того, что я имею в виду

http://codepen.io/MarkRBM/pen/KnztJ

У меня есть макет в 4 столбца. .wrapper ограничивается двумя колоннами шириной. .locstitle - 1 col wide и .locsexcerpt - 1 col wide, и они находятся в позиции, в которой я их хочу. Я хочу, чтобы .locsimage находился слева от .locsexcerpt непосредственно под .loctitle, но я не могу его переместить со дна .locslist. Если я переместил надпись выше .locsexcerpt, она просто отобразится справа от .locstitle и выше .locsexcerpt. Я думаю, что я сузил проблему до кода, с которым я связан, и это показано ниже. Заранее спасибо.

Html

<div class="wrapper"> 
    <div class="locslist">      
    <p class="locstitle">Galway</p> 
    <p class="locsexcerpt"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, quod quas aut quisquam necessitatibus ut aliquid eligendi sunt voluptas fugitLorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, quod quas aut quisquam necessitatibus ut aliquid eligendi sunt voluptas fugit!</p> 
    <img src="/DevTemplate/img/aranislands.jpg"    alt="" class="locsimage"> 
    </div> 
</div> 

CSS

.wrapper{ 
    max-width: 25%; 
} 

.locslist{ 
    display: inline-block; 
    text-align: center; 
    vertical-align: top; 
    border-radius: 10%; 
    background-color: #3475b3; 
    margin-bottom: 0.8em; 
    width: 49%; 
} 
.locstitle{ 
    float: left; 
    display: inline-block; 
    font-size: 1.5em; 
    font-weight: bold; 
    text-transform: uppercase; 
    text-align: top; 
    width: 50%; 
} 

.locsexcerpt{ 
    visibility: visible; 
    display: inline-block; 
    max-width: 45%; 
} 

.locsimage{ 
    float: left; 
    display: inline-block; 
    visibility: visible; 
    width: 45%; 
} 

Answer 1

Перемещение изображения под заголовком в HTML, а затем добавить clear:both; в CSS

HTML:

<div class="wrapper"> 
    <div class="locslist">      
    <p class="locstitle">Galway</p> 
    <img src="/DevTemplate/img/aranislands.jpg"    alt="" class="locsimage"> 
    <p class="locsexcerpt"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, quod quas aut quisquam necessitatibus ut aliquid eligendi sunt voluptas fugitLorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, quod quas aut quisquam necessitatibus ut aliquid eligendi sunt voluptas fugit!</p> 

    </div> 
</div> 

CSS:

.locsimage{ 
    float: left; 
    display: inline-block; 
    visibility: visible; 
    width: 45%; 
    clear:both; 
} 

Вы также можете играть с самой позицией.

Answer 2

Nest изображение внутри абзаца заголовка и удалите поплавок с картинки:

<p class="locstitle">Galway 
    <img src="/DevTemplate/img/aranislands.jpg" alt="" class="locsimage"> 
</p> 

demo (сдвиньте панель справа)

Answer 3

Просто всплывают право текстового блока .locsexcerpt.

См. Codepen. Я уверен, что вы захотите добавить некоторое дополнение к изображению, но позиционирование - это то, что вы искали (как я понял).

http://cdpn.io/kvjsc

.locsexcerpt{ 
    visibility: visible; 
    display: inline-block; 
    max-width: 45%; 
    float:right; 
}