Как разместить изображения рядом в div? (WordPress)

Question

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

Вот что я имею в своих функциях, чтобы обернуть мои изображения в div:

<?php

function breezer_addDivToImage( $content ) {

   // A regular expression of what to look for.
   $pattern = '/(<img([^>]*)>)/i';
   // What to replace it with. $1 refers to the content in the first 'capture group', in parentheses above
   $replacement = '<div class="image">$1</div>';

   // run preg_replace() on the $content
   $content = preg_replace( $pattern, $replacement, $content );

   // return the processed content
   return $content;
}

add_filter( 'the_content', 'breezer_addDivToImage' );

?>

И это CSS относительно этого:

#image {
        margin: 0px auto 24px !important;
        float: left !important;
    display: block;
}
#image:after { clear: both; }
#image:before, .halfeach:after { content: ""; display: table; }
p #image img { width: 49%; margin: 0; }
p #image a:first-child img { float: left; }
p #image a:last-child img { float: right; }

У меня есть пример сообщения здесь.

Отредактированный CSS:

    .alignright {
    float: right;
    margin: 0 0 50px 0;
    display: inline-block;
}
.alignleft {
    float: left;
    margin: 0 0 50px 0;
    display: inline-block;
}
a img.alignright {
    float: right;
    margin: 0 0 50px 0;
    display: inline-block;
}
a img.alignleft {
    float: left;
    margin: 0 0 50px 0;
    display: inline-block;
}
#page-container .image {
    margin: 7px 0px !important;
}

Answer 1

Вы должны иметь float:left для обоих изображений и дать ширину:50% для класса изображения

Answer 2

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

Во-вторых, вы используете класс .image но вы используете идентификатор #image в вашем CSS, так что это тоже не сработает. Так что измени это.

Два варианта:

• Убедитесь, что ваши изображения имеют 50% ширины (если 2 изображения)
• Увеличьте размер контейнера содержимого, чтобы оба изображения помещались рядом друг с другом.