Блог

Главная - Вопросы по программированию - Как отображать изображения по горизонтали в html

Как отображать изображения по горизонтали в html

#php #html #css

#php #HTML #css

Вопрос:

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

 <div class="portfolioimages"><img src="image.png"/></div>
<div class="portfolioimages"><img src="image1.png"/></div>
<div class="portfolioimages"><img src="image2.png"/></div>
<div class="portfolioimages"><img src="image3.png"/></div>
<div class="portfolioimages"><img src="image4.png"/></div>
<div class="portfolioimages"><img src="image5.png"/></div>
<div class="portfolioimages"><img src="image6.png"/></div>
<div class="portfolioimages"><img src="image7.png"/></div>
<div class="portfolioimages"><img src="image8.png"/></div>

Вот ссылка на скрипку

https://jsfiddle.net/2wzh1mk7/

 <?php if(isset($records2) amp;amp; is_array($records2)):?>
            <?php foreach ($records2 as $r):?>          
                <div class="blog1">
                    <img src="<?php echo base_url();?>admin/images/blogimages/thumbs/<?php echo $r->image_path;?>" class="testimonials1"/>

                </div>

            <?php endforeach ;endif;?>

Это мой фактический код на php для пояснения, который я написал в html-форме. Если я задам стиль как display: inline, все изображения будут отображаться в одной строке, но мне нужно отобразить 3 изображения подряд.

Ответ №1:

Попробуйте следующий стиль

 <html>
<head>
<style type="text/css">
.portfolioimages {
display:inline;
}
</style>
</head>

<body>
<div class="portfolioimages">AAAA</div>
<div class="portfolioimages">AAAA</div>
<div class="portfolioimages">AAAA</div>
<div class="portfolioimages">AAAA</div>
<div class="portfolioimages">AAAA</div>
<div class="portfolioimages">AAAA</div>
<div class="portfolioimages">AAAA</div>
<div class="portfolioimages">AAAA</div>
<div class="portfolioimages">AAAA</div>
</body>
</html>

Комментарии:

1. Ashwini Patil все изображения будут отображаться в одной строке, но мне нужно отобразить 3 изображения подряд

2. ОК. Если вы хотите, чтобы 3 изображения располагались в одной строке, то вы можете использовать тег <br> после каждых трех изображений.

3. Те изображения, которые приходят, извлекаются из серверной части, это не статическая страница. Пожалуйста, ознакомьтесь с моим обновленным кодом

Ответ №2:

Свойством стиля «display» по умолчанию для DIV является «block». Установите для него значение «inline» или «встроенный блок» в CSS:

 <style> div { display: inline; }</style>

PS: Это не вопрос PHP, это вопрос CSS.

Комментарии:

1. Как я уже упоминал php, это правильно. В описании, которое я упомянул, поскольку все изображения извлекаются из панели администратора и отображают интерфейс.

2. Вам нужно либо вставить таблицу стилей, либо изменить вывод панели администратора, чтобы добавить встроенный стиль, как показано в ответе @Ruchish Parikh

Ответ №3:

Гибкое решение:

 <div class="box">
  <div> element you want </div>
  <div> element you want </div>
  <div> element you want </div>
</div>

css:

 .box{
  display:flex;
  flex-direction:row;
}

Ответ №4:

Просто вам нужно установить float: Left свойство в классе div.

 .portfolioimages{
  float:left;
}

Используйте переменную counter и проверьте. Пожалуйста, проверьте приведенный ниже код на наличие 3 изображений в строке.

 <?php 
$cnt = 1;
if(isset($records2) amp;amp; is_array($records2)):?>
<?php foreach ($records2 as $r):?>          
    <div class="blog1">
        <img src="<?php echo base_url();?>admin/images/blogimages/thumbs/<?php echo $r->image_path;?>" class="testimonials1"/>

    </div>

<?php 
if(($cnt%3) == 0) { echo "<br>"; }
$cnt  ;
endforeach ;endif;?>

Комментарии:

1. Мне нужно отобразить три изображения подряд, но если я укажу float: left, то все они будут показаны в одной строке.

2. Нет, он отображает изображения только одно за другим

3. отображая 2 подряд, мне нужно отобразить 3

4. Другой способ взять ключ с помощью цикла foreach <?php foreach ($records2 as $key=>$r):?> , а затем проверить наличие 3 строк <?php if(($key%3) == 0) { echo "<br>"; } ?>

5. Хорошо, просто поставьте $cnt после завершения кода if. <?php if(($cnt%3) == 0) { echo "<br>"; } $cnt ; ?> @user7047368

Ответ №5:

Попробуйте,

 <div style="display:inline;" class="portfolioimages">AAAA</div>

Примечание: Добавлено display:inline

Комментарии:

1. Мне нужно отобразить три изображения в строке. если мы зададим display: inline, это означает, что все изображения будут отображаться в одной строке.

2. Итак, у вас уже есть ответ. если вы используете <div> with display: block , вы можете получить вертикальные деления. Вы можете добавить 3 раздела внутри div и сделать дочерние разделы как display: inline

Ответ №6:

Пожалуйста, отметьте правильную тему для вопроса, это связано с CSS, и используйте приведенный ниже css

 <style>
div {  
  display:inline;
}
</style>

Ответ №7:

Это работает, пожалуйста, проверьте это

.portfolioimages{float: слева}