我目前正在为我的网站构建轮播，我一直在尝试弄清楚如何使用 jquery 以编程方式使我的元素适合容器
最后一个元素似乎从容器中溢出，这是由于添加到元素的边距所致。每个元素之间都有空间。我似乎找不到正确的方法来让我的元素融入其中。
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
body {
background-color: beige; }
.carousel-group > .carousel-items {
margin-right: 8px;
background: grey;
float: left;
height: 300px; }
.carousel-container {
max-width: 1280px;
margin: 0 auto;
height: 300px;
background: teal;
overflow: hidden; }
.carousel-container > .carousel-group {
overflow: hidden; } <!doctype html>
<html>
<head>
<title>Carousel</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<div class="carousel-container">
<div class="carousel-group">
<div class="carousel-items"></div>
<div class="carousel-items"></div>
<div class="carousel-items"></div>
</div>
</div>
</body>
<script>
var getCarouselContainerwidth = $('.carousel-container').width(),
carouselItemsContainer = $('.carousel-group'),
carouselItems = $('.carousel-items'),
carouselItemsCount = carouselItems.length,
carouselItemsWidth = getCarouselContainerwidth / 3;
console.log(carouselItemsWidth + ' ' + 'Width Only');
carouselItems.width(carouselItemsWidth);
// Get the true width of an element with margins included
var carouselItemsWidthTrue = carouselItems.outerWidth(true);
console.log(carouselItemsWidthTrue + ' ' + 'Width with Margins');
carouselItemsContainer.width(carouselItemsWidthTrue * carouselItemsCount);
</script>
</html>
最佳答案
a.如果你想在所有元素上添加一些样式，你可以使用:
*{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
b.关于溢出，您将crosel项目宽度设置为crosel容器宽度/3，但老实说，使用边距8px * 3，您会得到24px的溢出。你能做的是:
carouselItemsWidth = (getCarouselContainerwidth / 3) - 8;
carouselItems.width(carouselItemsWidth);
或
carouselItemsWidth = (getCarouselContainerwidth+24) / 3;
carouselItems.width(carouselItemsWidth);
女巫也是一样。希望我能帮忙
关于javascript - 尝试使用 javascript/jquery 将我的元素放入容器/包装器中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50197080/