Question

这是我的代码：click here to see entire code

我正在尝试构建一个水平数组表。输入div的数据来自my google spreadsheet，我将该数据附加到id="schedule"的div中。每次我在电子表格中添加一个包含主题的新行时，我的HTML结果中会显示一个新的“主题”，这是完美的，但我的问题是创建的每个div（主题）都放在另一个下面，我想要相反，它们是水平的。我还想添加一个按钮，从左到右滑动每个div。（这个脚本更好地描述了我的意思：slide divs with a script）我想，一旦我弄清楚结果是什么，我自己就能做到这一点。

换句话说，我想从现在的情况出发，这是：对此：

我尝试在id="schedule"的div中应用“display：inline-block”，但它不会改变任何内容。

有谁能告诉我我的代码的哪一部分是将每个“主题”放在另一个之下？我如何更改它以将它们水平放置在另一个旁边呢？

我的代码：

<!doctype html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat" 
 rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">        
</script>
<script type="text/javascript">
var spreadsheetUrl = 'https://spreadsheets.google.com/feeds/cells/ 
1YrzAXbTiR19BSEFCzAluNAvSQRKwIRrVk4A6Lo-no5Q/1/public/values?alt=json-in- 
script&callback=doData';

function doData(data) { 
var results = [];
var entries = data.feed.entry;
var previousRow = 0;
for (var i = 0; i < entries.length; i++) {
    var latestRow = results[results.length - 1];
    var cell = entries[i];
    var text = cell.content.$t;
    var row = cell.gs$cell.row;
    if (row > previousRow) {
        var newRow = [];
        newRow.push(text);
        results.push(newRow);
        previousRow++;
    } else {
        latestRow.push(text);
    }

}
handleResults(results);
}

function handleResults(spreadsheetArray) {
for(var i = 1; i < spreadsheetArray.length; i++)
{   
    $("#schedule").append("<div id='img'><img src="+spreadsheetArray[i][0]+"         
width='300' style='border-radius: 8px;box-shadow: 0 3px 10px 0 
rgba(0,0,0,0.2),0 4px 10px 0 rgba(0,0,0,0.19) !important;'></div><div 
id='topic' style='font-size:120%;font-weight:bold;padding-left: 0px;'> 
<strong>Topic:</strong><span> "+spreadsheetArray[i][1]+"</span></div><div 
id='date'><strong>Date:</strong><span> "+spreadsheetArray[i][2]+"</span> 
</div><div id='time'><strong>Time:</strong><span> "+spreadsheetArray[i][3]+" 
</span>"+" a.m. California USA (GMT-7)</div>");
    $("#schedule").append("<div><label class='btn' for='modal- 
"+spreadsheetArray[i][7]+"'>More info</label></div> <input class='modal- 
state' id='modal-"+spreadsheetArray[i][7]+"' type='checkbox' /><div 
class='modal'> <label class='modal__bg' for='modal-"+spreadsheetArray[i] 
[7]+"'></label>  <div class='modal__inner'> <label class='modal__close' 
for='modal-"+spreadsheetArray[i][7]+"'></label>  <h2>"+spreadsheetArray[i] 
[1]+"</h2> <img 
src="+spreadsheetArray[i][6]+" alt='' style='float: right;padding-left: 
10px;' 
width='100%'/>&nbsp;<p><strong>Explanation: </strong>"+spreadsheetArray[i] 
[4]+"        
 </p><div id='count'><strong>Countdown:</strong><span> "+spreadsheetArray[i] 
[5]+"</span></div> </div></div>&nbsp;");
 }
}
$.ajax({
url: spreadsheetUrl,
jsonp: 'doData',
dataType: 'jsonp'
});
</script> 
<!----CSS------>
<style type="text/css">
.New-schedule {
margin: 12px; 
font-size: 14px; 
font-family: 'Montserrat', sans-serif;
line-height: 1.8;
float:left;
}
#schedule { display:inline-block;}
/* --- modal ---*/
.modal {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background: rgba(0,0,0, .9);
transition: opacity .25s ease;
}

.modal__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}
.modal-state { display: none;}
.modal-state:checked + .modal {
opacity: 1;
visibility: visible;}

.modal-state:checked + .modal .modal__inner {
top: 0;
}

.modal__inner {
transition: top .25s ease;
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
width: 50%;
margin: auto;
overflow: auto;
background: #fff;
border-radius: 5px;
padding: 1em 2em;
height: 85%;
}

.modal__close {
position: absolute;
right: 1em;
top: 1em;
width: 1.1em;
height: 1.1em;
cursor: pointer;
}

.modal__close:after,
.modal__close:before {
content: '';
position: absolute;
width: 2px;
height: 1.5em;
background: #ccc;
display: block;
transform: rotate(45deg);
left: 50%;
margin: -3px 0 0 -1px;
top: 0;
}

.modal__close:hover:after,
.modal__close:hover:before {
background: #aaa;
}

.modal__close:before {
transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {

.modal__inner {
width: 90%;
height: 90%;
box-sizing: border-box;
}
}
/* ---- Buttons --- */
.btn {
cursor: pointer;
background: #0099ff;
display: inline-block;
padding: .2em 1em;
color: #fff;
border-radius: 3px;
}

.btn:hover,
.btn:focus {background: #000000;}

.btn:active {
background: #038caa;
box-shadow: 0 1px 2px rgba(0,0,0, .2) inset;
}
p img {
max-width: 200px;
height: auto;
float: left;
margin: 0 1em 1em 0;
}
</style>
<!----end CSS------>
</head>
<body>
<div class="New-schedule">
<div id="schedule"></div>
</div>
</body>
</html>

Answer 1

您的方法

列表中的每个项目都在<div>中呈现。 Div被称为块级元素，换句话说，它们占据了它们所在容器的整个宽度。这就是为什么它们占据父容器的整个宽度并垂直向下堆叠页面的原因。您可以尝试使用固定宽度制作<div> display: inline-block，但首先需要整理该代码：

您的列表项<div id="img">未命名甚至有效。 id只能在document中使用img而class="schedule-item"并不是一个好名字。选择覆盖整行的语义，例如.schedule-item { display: inline-block; width: 300px; border-radius: 8px; /* other inline styles... */ }。
您已获得一吨内联样式，可以将其移至单独的样式规则：handleResults
for <div>循环从索引1开始，这可能意味着您正在跳过第一条记录。

更好的方法

看起来你需要一个你可以在网上找到的旋转木马/滑块插件/ GitHub。如果您能找到一个能够提供所需外观/行为的插件，那么您需要匹配其HTML结构，并且样式/交互将为您完成。例如，FlexSlider 2。您需要参考他们的特定文档，但JS伪代码可能是：

初始化容器public String keyval; FirebaseDatabase.getInstance().getReference().child("numbers-guess-...").child("simnumbers").addListenerForSingleValueEvent(new ValueEventListener() { @Override public void onDataChange(DataSnapshot dataSnapshot) { if (dataSnapshot != null && dataSnapshot.getValue() != null) { // for (DataSnapshot child : dataSnapshot.getChildren()) { // if we want to get do operation in multiple data then write your code here // } keyval = dataSnapshot.getKey()); } } @Override public void onCancelled(DatabaseError databaseError) { //add code in case you not get proper dat from firebase } });上的滑块插件并请求电子表格数据。
循环计划项目并使用滑块插件的API方法插入/添加幻灯片。

Here可以帮助您入门。

任何人都可以告诉我为什么我的div是垂直排序而不是横向排序？

1 个答案: