Question

我需要展示图像。所有图像都是从管理面板中获取的。这是代码，但这里所有的图像都是垂直显示的。

<?php if(isset($records2) && 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;?>

这是小提琴链接

https://jsfiddle.net/2wzh1mk7/

var loopback = require('loopback');
var boot = require('loopback-boot');
var helmet = require('helmet');
var errorHandler = require('strong-error-handler');
var bodyParser = require('body-parser');

var imf = require('bms-mca-oauth-sdk');

// Twilio Authy
var authy = require('authy')['DxJRXLSj6Tl4jD7ytHLx0bhXLEnonbOc'];

var app = module.exports = loopback();
app.use(helmet());
app.use(errorHandler({debug:true, log:true}));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

var authyUsrId = "";
app.post('/forTwilio', function(req, res){
    // send the received data to Twilio Authy
    authy.register_user('something@example.com', '7407098203', '91', function(err, res){
        authyUsrId = res.user.id;
    });
    res.send(authyUsrId);
});


// ------------ Protecting backend APIs with Mobile Client Access end -----------------

app.start = function () {
    // start the web server
    return app.listen(function () {
        app.emit('started');
        var baseUrl = app.get('url').replace(/\/$/, '');
        console.log('Web server listening at: %s', baseUrl);
        var componentExplorer = app.get('loopback-component-explorer');
        if (componentExplorer) {
            console.log('Browse your REST API at %s%s', baseUrl, componentExplorer.mountPath);
        }
    });
};

// Bootstrap the application, configure models, datasources and middleware.
// Sub-apps like REST API are mounted via boot scripts.
boot(app, __dirname, function (err) {
    if (err) throw err;
    if (require.main === module)
        app.start();
});

这是我在php中的实际代码，用于澄清我用html格式编写的内容。如果我将样式作为显示：内联所有图像将显示在sinlge行中，但我需要连续显示3个图像。

Answer 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>

Answer 2

默认＆＃34;显示＆＃34; DIV的样式属性是＆＃34; block＆＃34;。将其设置为＆＃34; inline＆＃34;或＆＃34;内联块＆＃34;在CSS中：

data-target

P.S。：这不是一个PHP问题，这是一个CSS问题。

Answer 3

FLEX解决方案：

<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;
}

Answer 4

尝试，

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

注意：已添加display:inline

Answer 5

请为正确的主题标记问题，这与CSS有关，请在css下面使用

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

Answer 6

这是有用的，请检查

.portfolioimages {浮动：左}

Answer 7

只需要在div类上设置float: Left属性。

.portfolioimages{
  float:left;
}

使用计数器变量并检查。请检查以下代码，每行3张图片。

<?php 
$cnt = 1;
if(isset($records2) && 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;?>

如何在html中水平显示图像

7 个答案:

这是有用的，请检查