个人中心
gpt4 book ai didi

javascript - 谁能告诉我为什么我的 div 是垂直排列而不是水平排列的？

转载 作者：太空宇宙 更新时间：2023-11-04 07:23:29 26 4
gpt4 key购买 nike

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

我正在尝试构建一个水平数组表。输入 div 的数据来自 my google spreadsheet然后我将该数据附加到带有 id="schedule" 的 div 中。每次我在我的电子表格中添加一个包含主题的新行时，一个新的“主题”会出现在我的 HTML 结果中，这是完美的但是，我的问题是创建的每个 div(主题)都放在另一个下面，我想要它们是一个相邻的，而不是水平的。我还想添加一个按钮来从左向右滑动每个 div。 (这个脚本更好地描述了我的意思:slide divs with a script)一旦我弄清楚是什么让我的结果垂直移动，我想我可以自己做。

换句话说，我想从我现在拥有的开始，就是这样: from_this对此: to_this

我尝试在带有 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>

最佳答案

您的方法

您列表中的每个元素都在 <div> 中呈现. Div 被称为 block 级元素，换句话说，它们占据了它们所在容器的整个宽度。这就是为什么它们占据父容器的整个宽度并垂直向下堆叠页面的原因。您可以尝试制作 <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循环从索引 1 开始，这可能意味着您要跳过第一条记录。

更好的方法

看起来您需要一个轮播/ slider 插件，您可以在网上/GitHub 上找到它。如果您能找到一个插件来提供您想要的外观/行为，您将需要匹配他们的 HTML 结构，并且样式/交互将为您处理。例如，FlexSlider 2 .您需要引用他们的特定文档，但 JS 伪代码可能是:

  • 初始化容器上的 slider 插件 <div>并请求电子表格数据。
  • 循环计划元素并使用 slider 插件的 API 方法插入/添加幻灯片。

Here可以帮助您入门。

关于javascript - 谁能告诉我为什么我的 div 是垂直排列而不是水平排列的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50094295/

26 4 0
文章推荐： JavaFX : Why doesn't the setContent method of SwingNode with a JComponent parameter accept a JPanel?
文章推荐： python - Python 中的 ID3 标签 - Python 是执行此任务的错误语言吗？
文章推荐： c - BST 插入不工作
文章推荐： Java LSt 默认和修改列表
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com