Изменить вывод PHP посредством HTML вместо одной колонки в три

Question

Ниже файл из Битрикс под названием template.php он выводит новости на главной странице в колонку, друг за другом, три новости, а надо исправить вывод, чтобы вместо вывода в одну колонку трех новостей подряд, они выводились в строку. Помогите пожалуйста!

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<?$cite_cut_length = 250;?>

<?foreach($arResult["ITEMS"] as $i=>$arItem):?>
<div style="float: left; width: 100%">
    <?//foreach($arResult["ITEMS"] as $i=>$arItem):?>
        <!--<div class="row">
            <div class="col-md-4">
                 <img alt="<?/*=$arItem["NAME"]*/?>" src="<?/*=$arItem["DETAIL_PICTURE"]["SRC"]*/?>" class="img-responsive"></a>
            </div>
            <div class="col-md-8">
                <p class="italic"><?/*=$arItem["~DETAIL_TEXT"]*/?></p>
                <p class="bt pt-10"><small><a href="<?/*=$arItem["DISPLAY_PROPERTIES"]["LINK"]["VALUE"]*/?>"><?/*=$arItem["~PREVIEW_TEXT"]*/?></a></small></p>
            </div>
        </div>-->

            <div style="float: left; width: 33%">
        <?if(isset($arItem["PREVIEW_PICTURE"]["SRC"])):?>
                <img alt="<?=$arItem["NAME"]?>" src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" class="img-responsive"></a>
        <?elseif(isset($arItem["DETAIL_PICTURE"]["SRC"])):?>
                <img alt="<?=$arItem["NAME"]?>" src="<?=$arItem["DETAIL_PICTURE"]["SRC"]?>" class="img-responsive"></a>
        <?endif;?>
            </div>

            <div style="float: left; width: 33%">
        <?if(isset($arItem["~PREVIEW_TEXT"])):?>
                <p class="italic"><?=$arItem["~PREVIEW_TEXT"]?></p>
        <?elseif(isset($arItem["~DETAIL_TEXT"])):?>
                <p class="italic"><?=$arItem["~DETAIL_TEXT"]?></p>
        <?endif;?>
            </div>
        </div>
    <?//endforeach;?>
</div>
<?endforeach;?>

Answer 1

О сути в комментариях уже сказал. Конкретно по проблеме здесь

<div style="float: left; width: 100%"> - когда будете изучать CSS, не встраивайте CSS в HTML-код, Вам самим потом будет тяжело исправлять баги.

Теперь о стилях, для решения конкретно этого вопроса начните с этого

<div class="container">
    <div>some data</div>
    <div>some data</div>
    <div>some data</div>
</div>

.container {
    display: flex;
    justify-content: space-around;
}

space-around - как один из вариантов. Количество <div>-ов = количество колонок в данном случае.

Или же

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

Здесь уже сколько ни пишите <div>-ов колонок всегда будет 3. Дальше пробуйте.

P.S.

Особо на процедурном стиле не останавливайтесь, переходите к ООП. Очень тяжело в этом стиле поддерживать и расширять код.
Очень помогает в поддержке и расширении проекта MVC-паттерн. Тоже загуглите удобная штука.

БЛОГ НА HUSL

Изменить вывод PHP посредством HTML вместо одной колонки в три

Ответы (1 шт):