如何使圖像在div內水平滾動
[英]How to make image scroll inside div horizontally
問題描述
我有一些圖像我希望它們水平顯示，如果 div 中沒有更多空間用於圖像而不是垂直顯示，它應該水平滾動。
我的代碼：index.php
foreach(somecondition) { //getting images from the directory
echo '
<div class="images">
<div class="Image"><img src="'.$saving.' " width="100" height="100" alt="Random image" class="img-responsive" /></div>
</div>
' ;
}
}
樣式.css
.images {
width: 500px;
height: 100px;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
}
.Image {
width: 24.5%;
background-color: #eee;
float: none;
height: 90%;
margin: 0 0.25%;
display: inline-block;
zoom: 1;
}
現在它垂直顯示圖像，也沒有滾動。 如何實現水平滾動？
更新代碼：
<html>
<head>
<link rel="stylesheet" href="cardAli.css">
</head>
<body>
<?php
require "navigationbar.php";
require "testing.php";
session_start();
$username = $_SESSION['userUsername'].$_SESSION['userId'];
/*$last_id = $_SESSION['last_id'];
$dirName = $_SESSION['dir_name'];*/
$image = 'userPos/hemlata993';
function listFolderFiles($dir){
echo '<div class="my_class">';
$ffs = scandir($dir);
unset($ffs[array_search('.', $ffs, true)]);
unset($ffs[array_search('..', $ffs, true)]);
// prevent empty ordered elements
if (count($ffs) < 1)
return;
$column_count = 0;
echo '<div class="images">';
foreach($ffs as $ff){
$s = "'<li>'.$ff";
$saving = "$dir/$ff";
$string = "$saving";
global $string_arr;
$string_arr = (explode("/",$string));
$sav;
$sav = '<li>'.$ff;
global $sa;
$sa = "$ff";
if(is_file($saving)) {
echo '
<div class="image">
<img src="'.$saving.' " width="100" height="100" alt="Random image" />
</div>
' ;
}
if(is_dir($dir.'/'.$ff)) listFolderFiles($dir.'/'.$ff);
}
echo '<div>';
require "testing.php";
$username = $_SESSION['userUsername'].$_SESSION['userId'];
$sql = "SELECT * FROM `_desc` WHERE `username` = '$username' AND `id` = '$string_arr[2]';";
$result = mysqli_query($conn, $sql);
$resultCheck = mysqli_num_rows($result);
if($resultCheck > 0) {
echo '</br>';
while($row = mysqli_fetch_assoc($result) ) {
echo '<div class="grid">' . '<h2>' . $row["_name"] . '</h2>' . '</div>';
echo '<div class="grid2">' . '<p>' . $row["_desc"] . '</p>' . '</div>';
echo '<hr/>';
// you can echo other info inside the grid
}
}
echo '</div>';
}
listFolderFiles($image);
?>
</body>
</html>
如果我按照人們在答案中的建議進行操作，它只會顯示第一組圖像，而不顯示第二組圖像，並且如果我遵循人們在答案中建議的內容，也不會像我在代碼中那樣顯示任何描述或名稱。 你能看看我的代碼嗎？ 我不確定我做錯了什么
3 個解決方案
解決方案1
0 2020-08-10 03:33:18
來，試試這個
在您的 HTML 中，將<div class="images">置於循環之外
<div class="images">
<?PHP
$images = "";
foreach(somecondition) { //getting images from the directory
$images .= '<div class="Image"><img src="'.$saving.' " width="100" height="100" alt="Random image" class="img-responsive" /></div>' ;
}
echo $images;
?>
</div>
在你的 css
<style>
.images {
width: 500px;
height: 100px;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
}
.Image {
width: 24.5%;
background-color: #eee;
float: none;
height: 90%;
margin: 0 0.25%;
display: inline-block;
zoom: 1;
}
</style>
解決方案2
0 2020-08-10 03:37:01
如果我正確理解了您的問題，您希望通過垂直滾動顯示目錄中的所有圖像。
問題在於您的php代碼，您沒有正確使用foreach 。 您還引用了不存在的$saving變量——您需要使用src屬性中的當前圖像才能正確顯示它。
希望下面的代碼將幫助您推進您想要實現的目標。
<?php
// images from your directory
$images = [
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
'https://via.placeholder.com/150'
];
?>
<!DOCTYPE html>
<style>
.images {
width: 500px;
height: 100px;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
}
.Image {
width: 24.5%;
background-color: #eee;
float: none;
height: 90%;
margin: 0 0.25%;
display: inline-block;
zoom: 1;
}
</style>
<body>
<div class="images">
<?php foreach ($images as $image) : ?>
<div class="Image">
<img src="<?= $image ?>" width="100" height="100" alt="Random image" class="img-responsive" />
</div>
<?php endforeach ?>
</div>
</body>
</html>
解決方案3
0 2020-08-10 03:40:47
嘗試在您的本地主機中運行此代碼。
我添加了 CSS flex屬性並使用https://placeholder.com/來獲取圖像。
<html>
<head>
<style>
.images{
width: 500px;
height: 100px;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
/* newly added css */
display: flex;
flex-direction: row;
margin:-7px 0 0 -7px;
}
/* newly added css */
.images > div{
margin:7px 0 0 7px;
}
.Image{
width: 24.5%;
background-color: #eee;
height: 90%;
margin: 0 0.25%;
float:none;
display: inline-block;
zoom: 1;
}
</style>
</head>
<body>
<?php
$img = '';
$img .= '<div class="images">';
for ($i=25; $i <250 ; $i+= 5) {
$img .= '<div class="Imgage"><img src="https://via.placeholder.com/'. $i . '"></div>';
}
$img .= '</div>';
echo $img;
?>
</body>
</html>
以下是根據更新問題的答案 -
<?php session_start(); ?>
<html>
<head>
<link rel="stylesheet" href="cardAli.css">
</head>
<body>
<?php
require "navigationbar.php";
require "testing.php";
$username = $_SESSION['userUsername'].$_SESSION['userId'];
$image = 'userPos/hemlata993';
function listFolderFiles($dir){
// removing . and .. from scandir()
$ffs = array_diff(scandir($dir), array('..', '.'));
// prevent empty ordered elements
if (count($ffs) < 1) return;
$column_count = 0;
echo '<div class="my_class">';
echo '<div class="images">';
foreach($ffs as $ff){
$s = "'<li>'.$ff";
$saving = "$dir/$ff";
$string = "$saving";
$string_arr = (explode("/",$string));
$sav = '<li>'.$ff;
$sa = "$ff";
if(is_file($saving)) {
echo '<div class="image"><img src="'.$saving.' " width="100" height="100" alt="Random image"/></div>';
}
if(is_dir($dir.'/'.$ff)) listFolderFiles($dir.'/'.$ff);
} // foreach
echo '</div>';
// Your sql code starts...
}
listFolderFiles($image);
?>
</body>
</html>
帶有內部圖像的div onmouseout，如何在每次選擇圖像時不“離開” div的情況下進行這項工作？
[英]Div onmouseout with images inside , how to make this work without “getting out” the div every time i select a image?
使背景圖片與同一div中的其他鏈接和元素可點擊
[英]Make background image clickable with other links and elements inside the same div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.