首页 \ 问答 \ Html图库(Html image gallery)

Html图库(Html image gallery)

在此处输入图像描述
 

 我正在尝试制作一个图库，我使用以下代码的问题是图像没有浮动到左边，因为图像的大小不同。 当我点击图像看到它的猪的全尺寸。 有没有办法解决这个问题，或者在厨房模式下显示一半的图片。 
 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Image Gallery</title>
        <link rel="stylesheet" href='css/gallery.css'>
    </head>
    <body>
        <div class='container'>
            <?php if($images):?>
                <div class='gallery cf'>
                    <?php foreach($images as $image):?>
                    <div class='gallery-item'>
                        <a href="<?php echo $image['full'] ?>"><img src="<?php echo $image['full'] ?>" ></a>
                    </div>
                    <?php endforeach; ?>
                </div>
            <?php else: ?>
                There are no images 
            <?php endif; ?>
        </div>
    </body>
</html>


.cf:before,
.cf:after{
    content: " ";
    display: table;
}

.cf:after{
    clear:both;
}

.container{
    max-width: 940px;
    padding: 10px;
    background: #f0f0f0;
    margin: 0 auto;
}

.gallery{
    width:100%;
}

.gallery-item{
    float:left;
    background: #fff;
    width:19%;
    margin:1%;
    padding:2%;
    padding-bottom: 5%;
    box-shadow:1px 1px 3px rgba(0,0,0,.2);
}

.gallery-item img{
    width:100%;
}


enter image description here
 

I’m trying to make an image gallery, the issues i am having with the following code is that the images are not floating to the left because the images are different sizes. also when i click on the image to see the full size its very pig. is there a way to fix this, or maybe display half of the picture when in galley mode. 
 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Image Gallery</title>
        <link rel="stylesheet" href='css/gallery.css'>
    </head>
    <body>
        <div class='container'>
            <?php if($images):?>
                <div class='gallery cf'>
                    <?php foreach($images as $image):?>
                    <div class='gallery-item'>
                        <a href="<?php echo $image['full'] ?>"><img src="<?php echo $image['full'] ?>" ></a>
                    </div>
                    <?php endforeach; ?>
                </div>
            <?php else: ?>
                There are no images 
            <?php endif; ?>
        </div>
    </body>
</html>


.cf:before,
.cf:after{
    content: " ";
    display: table;
}

.cf:after{
    clear:both;
}

.container{
    max-width: 940px;
    padding: 10px;
    background: #f0f0f0;
    margin: 0 auto;
}

.gallery{
    width:100%;
}

.gallery-item{
    float:left;
    background: #fff;
    width:19%;
    margin:1%;
    padding:2%;
    padding-bottom: 5%;
    box-shadow:1px 1px 3px rgba(0,0,0,.2);
}

.gallery-item img{
    width:100%;
}


原文：
更新时间：2021-09-04 12:09

最满意答案

 使用JsonConvert.DeserializeObject<Dictionary<string, object>>() ： 
 

var json = @"{""ShowMapUrl"":true,""GameDiffusionType"":5,""InputYellowCards"":false,""DisplayYellowCards"":false,""InputYellowCards2"":false}";
var dict = JsonConvert.DeserializeObject<Dictionary<string, object>>(json);


Use JsonConvert.DeserializeObject<Dictionary<string, object>>():
 

var json = @"{""ShowMapUrl"":true,""GameDiffusionType"":5,""InputYellowCards"":false,""DisplayYellowCards"":false,""InputYellowCards2"":false}";
var dict = JsonConvert.DeserializeObject<Dictionary<string, object>>(json);

相关问答

更多