Bootstrap 3 中的第 N 个子选择器答案

【问题标题】：Nth-child selector in Bootstrap 3Bootstrap 3 中的第 N 个子选择器
【发布时间】：2015-11-04 13:50:28
【问题描述】：

我有这个页面结构

<div class="pictures-page">
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>   


</div>

这里的所有元素都是向左浮动的，我需要的是每隔一个图片元素向右浮动？

我尝试使用 div:nth-child(odd) 但所有图片都向右浮动，我需要每隔一张图片浮动对吗？有没有简单 CSS 的解决方案？？

【问题讨论】：

标签： css twitter-bootstrap-3 css-selectors css-float

【解决方案1】：

以下内容满足您的要求：

.pictures-page *:nth-child(4n+1) img{float:right;}
.pictures-page div:nth-child(2n+1){clear:left;}

但我猜你真正想要的是页面左右边缘交替出现的图像：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
html, body{
    box-sizing:border-box;
}
body * {box-sizing:inherit;}

.pictures-page{width:100%;overflow:hidden;}

.pictures-page img{max-height:150px width:auto;}
.pictures-page .row:nth-child(2n+1) .col-md-6:nth-child(1){float:right;text-align:right;}
</style>
</head>
<body>
<div class="container">
<div class="pictures-page">
<div class="row">
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
</div>
<div class="row">
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
</div>
<div class="row">
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
</div>
<div class="row">
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
</div>
<div class="row">
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>   
</div>

</div>
</div>
</body>
</html>

【讨论】：