[英]How do I get these boxes to align in either jquery or css
I have boxes in a line, and I want it so when a new one is appended, it moves the others to the right and fits in on the left, and if the boxes overflow your screen they are simply hidden. 我有一个行中的盒子,我想要它,所以当一个新的附加,它将其他人移动到右边,并适合在左边,如果框溢出你的屏幕,他们只是隐藏。 I want to be able to keep appending so it needs to be I know I could fiddle with absolute position and jquery - use hidden input with box count, calculate the screen width and define left or right positions, but to be honest I'd rather not: I'm sure there's a way of doing it with overflows but I cant get anything to work.
我希望能够继续追踪,所以它需要我知道我可以摆弄绝对位置和jquery - 使用隐藏输入与盒数,计算屏幕宽度和定义左或右位置,但说实话我更愿意不是:我确定有一种方法可以解决溢出问题但我无法得到任何工作。 I am open to adding divs / css etc. Many thanks,
我愿意添加divs / css等。非常感谢,
HTML: HTML:
<div id="boxWrap">
<div id="innerWrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
jquery: jQuery的:
$(function() {
var html = '<div class="box"></div>';
$('#boxWrap').append(html);
});
CSS: CSS:
.box {
width: 100px;
height: 100px;
background-color: #333333;
margin: 5px;
display: inline-block;
position: relative;
}
#boxWrap {
width: 100%;
overflow-y: visible;
height: 20px;
}
#innerWrap {
overflow-x: hidden;
max-width: 100%;
}
Edit: 编辑:
<button>Append</button>
<div id="boxWrap">
<div id="innerWrap"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div>
</div>
<input id="count" value=0></input>
$('button').click(function(){
var html = '<div class="box"></div>';
$inWrap = $('#innerWrap');
$inWrap.prepend(html);
$lastBox = $inWrap.find('.box');
var count = parseInt( $('#count').val(), 10 );
count = count+1;
$('#count').val(count.toString());
var limit = $inWrap.width() / 110;
if( 110*count >= $inWrap.width() ) {
$lastBox.index(count-1).css( {"display": "none" } );
}
});
If you want the boxes to be added to the left of (before) the others, you'll want to use prepend()
, you'll also want to call it on the parent of the boxes. 如果你想将这些框添加到其他框的左边(之前),你会想要使用
prepend()
,你也想要在框的父级上调用它。 You can keep your boxes on the same line by changing the white-space
CSS property: 您可以通过更改
white-space
CSS属性将您的框保持在同一行:
jQuery jQuery的
var html = '<div class="box"></div>';
$('#innerWrap').prepend(html);
CSS CSS
#innerWrap {
white-space:nowrap;
overflow-x: hidden;
max-width: 100%;
}
I'm not sure I've fully understood the question, but this is what I think you are looking for. 我不确定我是否已完全理解这个问题,但这就是我认为您正在寻找的问题。
You can achieve this by using display table/table-cell which are perfect for filling a container with a random number of child without overflowing. 你可以通过使用display table / table-cell来实现这个目的,它非常适合用随机数量的容器填充容器而不会溢出。
.box {
background-color: #333333;
display: table-cell;
color:white;
text-align:center;
}
#boxWrap {
width: 100%;
}
#innerWrap {
width:100%;
display:table;
}
Here is a fiddle to explain 这是一个小提琴来解释
You can click on "Click me" to add any number of box. 您可以单击“单击我”添加任意数量的框。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.