Question

我试图创建一个简单的文本幻灯片，为此我需要将元素放在父元素中彼此相邻，因此一次只显示一个子元素。

我遇到的问题是父元素和子元素都是100％宽度，我需要保持这种方式，因为我的设计等。

这就是我对子元素的要求：

SELECT

有人可以就此问题提出建议吗？

＆＃13;

.some {
    width:100%;
    height:450px;
    display: inline-block;
}

＆＃13;

.some {
  width: 100%;
  height: 450px;
  display: inline-block;
}

＆＃13;

Answer 1

了解CSS flexbox 。

对于你想要的对齐方式，这就是你需要的所有CSS：

#feedTxt {
    display: flex;
    overflow-x: scroll; /* for the demo */
}

.some {
    flex: 0 0 100%;
    height: 450px;
}

Revised Fiddle

要了解有关flexbox的更多信息，请访问：

浏览器支持：

所有主流浏览器except IE 8 & 9都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。 this answer中的更多详细信息。

Answer 2

您可以尝试使子元素绝对定位，只需设置“display：none;”在那些你不想看到的。此方法也适用于旧版浏览器：

.some{
width:100%;
height:100%;
position:absolute;
}    
<div style="width:100%;white-space:nowrap;height:500px;overflow:hidden;" id="feedTxt">
<div class="some" style="height:100%;background-color:pink;">
Box 1
</div>
<div class="some" style="height:100%;background-color:greenyellow;">
Box 2
</div>
<div class="some" style="height:100%;background-color:deepskyblue;">
Box 3
</div>
</div>

Answer 3

$(document).ready(function(){    
var slideCount = 0;
start();

function start(){    
var i;  
var x = document.getElementsByClassName(".some");  
for(i = 0; i < x.length; i++){  
x[i].style.display = "none";  
}  

slideCount++;  
if(slideCount > x.length) {slideCount = 1}  
x[slideCount-1].style.display = "block";  
$(x[slideCount-1]).effect("slide", {direction:"left"});  
setTimeout(start, 5000);    
};   
});


.some{    
      display:none;    
      margin:auto;    
      }

这是使用JavaScript / jQueryUI，这将按时间顺序滑动每个div具有相同的类。

将div放在100％宽度的父级中？

3 个答案: