[英]HTML make view horizontally with scroll
我有一個帶卷軸的垂直視圖。 這就是它的樣子:圖片在這里。
這是查看代碼。 我正在使用 php 來獲取數據,並使用 html 來顯示它:
<div class="ex3">
<?php
$query = "SELECT * FROM sales WHERE ident ='".$currentName."' ORDER BY STR_TO_DATE(date, '%d.%m.%Y') DESC";
if ($result = $mysqli->query($query)) {
$num_rows = 0;
while ($row = $result->fetch_assoc()) {
$num_rows++;
echo '<div class="Nwrapper">';
echo '<div id="NformContent">';
echo
"<tr><br>
<td><b>{$row['date']}</b></td><br><br>
<td>{$row['name']}</td> <b>/</b>
<td>{$row['gsm']}</td><br>
<td>{$row['email']}</td><br><br>
<td><b>Info</b><br>{$row['pp']}</td><br>
<td>Date: {$row['transfer']}</td><br><br>
<td><a href='delete.php?id={$row['id']};' class='aRS'>Update</a><a href='delete.php?id={$row['id']};' class='aR'>Delete</a></td><br><br>
</tr>";
echo '</div>';
echo '</div><br>';
}
/*freeresultset*/
$result->free();
}
?>
</div>
這是我的 css 代碼的樣子:
<style type="text/css">
div.ex3 {
width: 100%;
height: 90%;
overflow: auto;
}
/* width */
::-webkit-scrollbar {
width: 0px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.Nwrapper {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
/*width: 100%;
min-height: 100%;*/
padding: 20px;
}
#NformContent {
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
background: #fff;
padding: 30px;
width: 50%;
position: relative;
padding: 0px;
-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
text-align: center;
}
.aRS {
background-color: #4caf50;
border: none;
color: white;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 11px;
margin: 4px 2px;
cursor: pointer;
}
是否有可能以某種方式更改此代碼,使視圖和滾動水平而不是垂直移動,或者我是否必須以不同的方式進行?
編輯問題:
我試着改變一下。 我在<?php
腳本之前添加了這段代碼:
<div id="outer_wrapper">
<div id="inner_wrapper">
這是 CSS:
.Nwrapper {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
/*width: 100%;
min-height: 100%;*/
padding: 20px;
}
#NformContent {
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
background: #fff;
padding: 30px;
width: 100%;
position: relative;
padding: 0px;
-webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,0.1);
box-shadow: 0 10px 20px 0 rgba(0,0,0,0.1);
text-align: center;
}
#outer_wrapper {
overflow: scroll;
width:100%;
height: 100%;
}
#outer_wrapper #inner_wrapper {
width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
width: 250px;
height:300px;
float: left;
margin: 0 4px 0 0;
border:0px grey solid;
}
現在是水平滾動,但是滾動超長,即使什么也沒有顯示,也只是白色背景。 我嘗試更改此行: width:6000px;
到auto
和/或100%
,但這只會使其垂直滾動。
只需從 div.ex3 中刪除寬度並添加浮動,還可以從 #NformContent 中刪除寬度並添加填充,如果您使用引導程序,則可以輕松地做到這一點。
div.ex3 {
/* width:100%;Delete This**************/
float:left; /* Add This**************/
height: 90%;
overflow: auto;
}
/* width */
::-webkit-scrollbar {
width: 0px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.Nwrapper {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
/*width: 100%;
min-height: 100%;*/
padding: 20px;
}
#NformContent {
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
background: #fff;
padding: 30px;
/*width:50%; Delete This**************/
position: relative;
-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
text-align: center;
}
.aRS {enter code here
background-color: #4caf50;
border: none;
color: white;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 11px;
margin: 4px 2px;
cursor: pointer;
}
如果您使用框架來模擬前端,生活將會很輕松。
但是,您可以將 class 設置為...
.ex3 {
overflow-x: scroll;
width: max-content;
}
.Nwrapper {
float: left;
width: 200px; /*whatever you want it to*/
}
#NformContent {
width: 100%; /*change 50% to 100%*/
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.